|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>فاست برو - حلول الذكاء الاصطناعي المتقدمة</title> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #4facfe; |
|
|
--primary-gradient: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); |
|
|
--secondary-color: #36d1dc; |
|
|
--secondary-gradient: linear-gradient(to right, #36d1dc 0%, #5b86e5 100%); |
|
|
--accent-color: #ff6a88; |
|
|
--accent-gradient: linear-gradient(to right, #ff6a88 0%, #ff99ac 100%); |
|
|
--dark-color: #1d2b3a; |
|
|
--light-color: #f8fbff; |
|
|
--text-color: #334455; |
|
|
--bg-color: #ffffff; |
|
|
--card-bg: #f0f5ff; |
|
|
--footer-bg: #1a2b3c; |
|
|
--success-color: #2ee86a; |
|
|
--warning-color: #ffcc00; |
|
|
--info-color: #17a2b8; |
|
|
--transition: all 0.3s ease-in-out; |
|
|
--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); |
|
|
--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
--button-shadow: 0 10px 20px rgba(79, 172, 254, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
[data-theme="dark"] { |
|
|
--primary-color: #4facfe; |
|
|
--primary-gradient: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); |
|
|
--secondary-color: #36d1dc; |
|
|
--secondary-gradient: linear-gradient(to right, #36d1dc 0%, #5b86e5 100%); |
|
|
--accent-color: #ff6a88; |
|
|
--accent-gradient: linear-gradient(to right, #ff6a88 0%, #ff99ac 100%); |
|
|
--dark-color: #f0f5ff; |
|
|
--light-color: #1d2b3a; |
|
|
--text-color: #e0e0e0; |
|
|
--bg-color: #121a24; |
|
|
--card-bg: #1e2936; |
|
|
--footer-bg: #0c1218; |
|
|
--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); |
|
|
--button-shadow: 0 10px 20px rgba(79, 172, 254, 0.2); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Cairo', 'Roboto', sans-serif; |
|
|
background-color: var(--bg-color); |
|
|
color: var(--text-color); |
|
|
overflow-x: hidden; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[dir="ltr"] { |
|
|
font-family: 'Roboto', 'Cairo', sans-serif; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-weight: 700; |
|
|
margin-bottom: 1rem; |
|
|
line-height: 1.3; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
p { |
|
|
line-height: 1.6; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
a { |
|
|
text-decoration: none; |
|
|
color: var(--primary-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
a:hover { |
|
|
color: var(--secondary-color); |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
.section { |
|
|
padding: 80px 0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
text-align: center; |
|
|
margin-bottom: 50px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.section-title h2 { |
|
|
font-size: 2.5rem; |
|
|
display: inline-block; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
padding-bottom: 15px; |
|
|
} |
|
|
|
|
|
.section-title h2::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 80px; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.section-title h2::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 40px; |
|
|
height: 4px; |
|
|
background: var(--accent-gradient); |
|
|
border-radius: 2px; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
width: 40px; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
width: 60px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.animated-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.05; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.bg-symbol { |
|
|
position: absolute; |
|
|
opacity: 0.3; |
|
|
animation: float 15s linear infinite; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { |
|
|
transform: translateY(0) rotate(0deg); |
|
|
opacity: 0.3; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.7; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-1000px) rotate(360deg); |
|
|
opacity: 0.3; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.top-nav { |
|
|
background-color: var(--dark-color); |
|
|
padding: 8px 0; |
|
|
color: white; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.top-nav-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.top-nav-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.top-nav-links { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.top-nav-item { |
|
|
margin: 0 15px; |
|
|
} |
|
|
|
|
|
.top-nav-link { |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
position: relative; |
|
|
padding: 5px 0; |
|
|
font-size: 0.9rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.top-nav-link img { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
margin-left: 8px; |
|
|
} |
|
|
|
|
|
.top-nav-link:hover { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.top-nav-right { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
position: sticky; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
padding: 15px 0; |
|
|
background-color: rgba(255, 255, 255, 0.95); |
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); |
|
|
z-index: 100; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .header { |
|
|
background-color: rgba(18, 26, 36, 0.95); |
|
|
} |
|
|
|
|
|
.header.scrolled { |
|
|
padding: 10px 0; |
|
|
background-color: rgba(255, 255, 255, 0.98); |
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .header.scrolled { |
|
|
background-color: rgba(18, 26, 36, 0.98); |
|
|
} |
|
|
|
|
|
.navbar { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
margin-right: 10px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 20px; |
|
|
box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3); |
|
|
} |
|
|
|
|
|
.logo-img { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
margin-right: 10px; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.logo-img img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
color: var(--dark-color); |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.logo-text-animated { |
|
|
display: inline-block; |
|
|
border-right: 3px solid var(--primary-color); |
|
|
padding-right: 8px; |
|
|
animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: var(--primary-color) } |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
margin: 0 15px; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: var(--dark-color); |
|
|
font-weight: 600; |
|
|
position: relative; |
|
|
padding: 5px 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-link img { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
margin-left: 8px; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .nav-link { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: var(--primary-gradient); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.nav-link:hover::after, |
|
|
.nav-link.active::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.nav-buttons { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.language-selector { |
|
|
position: relative; |
|
|
margin-right: 20px; |
|
|
} |
|
|
|
|
|
.language-current { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
padding: 5px 10px; |
|
|
border-radius: 8px; |
|
|
background: var(--card-bg); |
|
|
transition: var(--transition); |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.language-current:hover { |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.language-current:hover span { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.language-flag { |
|
|
width: 20px; |
|
|
height: 15px; |
|
|
margin-right: 5px; |
|
|
border-radius: 2px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.language-options { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
right: 0; |
|
|
width: 150px; |
|
|
background: var(--bg-color); |
|
|
border-radius: 8px; |
|
|
box-shadow: var(--card-shadow); |
|
|
padding: 10px; |
|
|
margin-top: 10px; |
|
|
display: none; |
|
|
z-index: 10; |
|
|
animation: fadeInDown 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeInDown { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.language-option { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 8px 10px; |
|
|
cursor: pointer; |
|
|
border-radius: 5px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.language-option:hover { |
|
|
background: var(--primary-color); |
|
|
} |
|
|
|
|
|
.language-option:hover span { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.theme-toggle { |
|
|
width: 60px; |
|
|
height: 30px; |
|
|
background: var(--card-bg); |
|
|
border-radius: 30px; |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
margin-right: 20px; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.theme-toggle::before { |
|
|
content: '☀️'; |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
left: 7px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.theme-toggle::after { |
|
|
content: '🌙'; |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
right: 7px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.toggle-circle { |
|
|
position: absolute; |
|
|
top: 3px; |
|
|
left: 3px; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
transition: var(--transition); |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .toggle-circle { |
|
|
left: 33px; |
|
|
} |
|
|
|
|
|
.search-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.2rem; |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
margin-right: 20px; |
|
|
transition: var(--transition); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.search-toggle:hover { |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .search-toggle { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.mobile-toggle { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.mobile-toggle:hover { |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-toggle { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.dropdown-menu { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
right: 0; |
|
|
background: var(--bg-color); |
|
|
border-radius: 8px; |
|
|
box-shadow: var(--card-shadow); |
|
|
padding: 15px; |
|
|
width: 220px; |
|
|
display: none; |
|
|
z-index: 100; |
|
|
animation: fadeInDown 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-item.has-dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.dropdown-item { |
|
|
display: block; |
|
|
padding: 10px 15px; |
|
|
border-radius: 5px; |
|
|
transition: var(--transition); |
|
|
color: var(--dark-color); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .dropdown-item { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.dropdown-item:hover { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.dropdown-divider { |
|
|
height: 1px; |
|
|
background: rgba(0, 0, 0, 0.05); |
|
|
margin: 10px 0; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .dropdown-divider { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
|
|
|
.search-modal { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
z-index: 200; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.search-modal.active { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.search-container { |
|
|
width: 600px; |
|
|
max-width: 90%; |
|
|
background: var(--bg-color); |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
transform: translateY(-50px); |
|
|
transition: var(--transition); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.search-modal.active .search-container { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.search-form { |
|
|
display: flex; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .search-form { |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.search-input { |
|
|
flex: 1; |
|
|
padding: 15px 20px; |
|
|
border: none; |
|
|
outline: none; |
|
|
font-size: 1.2rem; |
|
|
background: transparent; |
|
|
color: var(--text-color); |
|
|
font-family: inherit; |
|
|
} |
|
|
|
|
|
.search-submit { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 0 30px; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.search-submit:hover { |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.search-close { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
font-size: 1.5rem; |
|
|
color: #fff; |
|
|
border: none; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.search-close:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
padding: 180px 0 100px; |
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
margin-top: -80px; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .hero { |
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%); |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.hero-text { |
|
|
flex: 1; |
|
|
max-width: 600px; |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
display: inline-block; |
|
|
padding: 8px 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
border-radius: 30px; |
|
|
font-size: 0.9rem; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: var(--button-shadow); |
|
|
transform: translateY(0); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.hero-subtitle:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 3.5rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
line-height: 1.2; |
|
|
background: linear-gradient(to right, var(--dark-color), var(--primary-color)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.hero-description { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 30px; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.typewriter-container { |
|
|
height: 30px; |
|
|
margin-bottom: 20px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.typewriter-text { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 600; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 12px 30px; |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
transition: var(--transition); |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
font-family: inherit; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.btn::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 0%; |
|
|
height: 100%; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
transition: var(--transition); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.btn:hover::before { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
color: var(--dark-color); |
|
|
border: 2px solid var(--primary-color); |
|
|
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.15); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .btn-outline { |
|
|
color: white; |
|
|
border-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--button-shadow); |
|
|
border-color: transparent; |
|
|
} |
|
|
|
|
|
.btn i { |
|
|
margin-right: 8px; |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
flex: 1; |
|
|
max-width: 500px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hero-img { |
|
|
width: 100%; |
|
|
animation: float-img 4s ease-in-out infinite; |
|
|
border-radius: 10px; |
|
|
box-shadow: var(--box-shadow); |
|
|
} |
|
|
|
|
|
@keyframes float-img { |
|
|
0%, 100% { |
|
|
transform: translateY(0) rotate(0deg); |
|
|
} |
|
|
25% { |
|
|
transform: translateY(-15px) rotate(2deg); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(0) rotate(0deg); |
|
|
} |
|
|
75% { |
|
|
transform: translateY(15px) rotate(-2deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.hero-shapes { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: -1; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.shape { |
|
|
position: absolute; |
|
|
opacity: 0.2; |
|
|
} |
|
|
|
|
|
.shape-1 { |
|
|
top: 20%; |
|
|
left: 10%; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background: var(--primary-color); |
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
|
|
animation: morphing 15s linear infinite alternate; |
|
|
} |
|
|
|
|
|
.shape-2 { |
|
|
bottom: 10%; |
|
|
right: 10%; |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
background: var(--accent-color); |
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; |
|
|
animation: morphing 12s linear infinite alternate-reverse; |
|
|
} |
|
|
|
|
|
.shape-3 { |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background: var(--secondary-color); |
|
|
border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%; |
|
|
animation: morphing 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes morphing { |
|
|
0% { |
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
|
|
} |
|
|
25% { |
|
|
border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%; |
|
|
} |
|
|
50% { |
|
|
border-radius: 67% 33% 47% 53% / 37% 20% 80% 63%; |
|
|
} |
|
|
75% { |
|
|
border-radius: 39% 61% 47% 53% / 37% 40% 60% 63%; |
|
|
} |
|
|
100% { |
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.about { |
|
|
background: var(--bg-color); |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
flex: 1; |
|
|
position: relative; |
|
|
max-width: 500px; |
|
|
} |
|
|
|
|
|
.about-img { |
|
|
width: 100%; |
|
|
border-radius: 20px; |
|
|
box-shadow: var(--box-shadow); |
|
|
transition: var(--transition); |
|
|
transform: rotate(-3deg); |
|
|
} |
|
|
|
|
|
.about-image:hover .about-img { |
|
|
transform: rotate(0deg) scale(1.03); |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.about-title { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
background: linear-gradient(to right, var(--dark-color), var(--primary-color)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.about-description { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.about-features { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 20px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.feature-item { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
background: var(--card-bg); |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.feature-item:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
.feature-item:hover .feature-icon, |
|
|
.feature-item:hover .feature-text h4, |
|
|
.feature-item:hover .feature-text p { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
min-width: 50px; |
|
|
background: white; |
|
|
color: var(--primary-color); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
border-radius: 10px; |
|
|
margin-right: 15px; |
|
|
font-size: 1.5rem; |
|
|
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.feature-text h4 { |
|
|
margin-bottom: 5px; |
|
|
font-size: 1.1rem; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.feature-text p { |
|
|
font-size: 0.9rem; |
|
|
margin-bottom: 0; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
|
|
|
.preferences { |
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%); |
|
|
} |
|
|
|
|
|
.preferences-tabs { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 15px; |
|
|
margin-bottom: 40px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.pref-tab { |
|
|
padding: 12px 25px; |
|
|
background: var(--card-bg); |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
box-shadow: var(--card-shadow); |
|
|
color: var(--dark-color); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.pref-tab i { |
|
|
margin-right: 8px; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.pref-tab.active, .pref-tab:hover { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3); |
|
|
} |
|
|
|
|
|
.pref-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.pref-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.pref-cards { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.pref-card { |
|
|
background: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
text-align: center; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.pref-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: var(--primary-gradient); |
|
|
transition: var(--transition); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.pref-card:hover::before { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.pref-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.pref-card:hover .pref-icon, |
|
|
.pref-card:hover .pref-title, |
|
|
.pref-card:hover .pref-desc, |
|
|
.pref-card:hover .pref-features li, |
|
|
.pref-card:hover .btn-contact { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.pref-card:hover .btn-contact { |
|
|
background: white; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.pref-icon { |
|
|
font-size: 3rem; |
|
|
color: var(--primary-color); |
|
|
margin-bottom: 20px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.pref-title { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.pref-desc { |
|
|
font-size: 0.95rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--text-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.pref-features { |
|
|
list-style: none; |
|
|
margin-bottom: 25px; |
|
|
} |
|
|
|
|
|
.pref-features li { |
|
|
padding: 8px 0; |
|
|
border-bottom: 1px dashed rgba(0, 0, 0, 0.1); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .pref-features li { |
|
|
border-bottom: 1px dashed rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.pref-features li:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
.btn-contact { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 12px 25px; |
|
|
border-radius: 8px; |
|
|
display: inline-block; |
|
|
font-weight: 600; |
|
|
transition: var(--transition); |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
.btn-contact:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.api-services { |
|
|
background: var(--bg-color); |
|
|
} |
|
|
|
|
|
.api-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 50px; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.api-image { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.api-img { |
|
|
width: 100%; |
|
|
border-radius: 15px; |
|
|
box-shadow: var(--box-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.api-img:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.api-code { |
|
|
position: absolute; |
|
|
bottom: -30px; |
|
|
right: -30px; |
|
|
background: var(--bg-color); |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
box-shadow: var(--card-shadow); |
|
|
width: 300px; |
|
|
max-width: 100%; |
|
|
font-family: monospace; |
|
|
font-size: 0.9rem; |
|
|
color: var(--primary-color); |
|
|
animation: float 4s ease-in-out infinite; |
|
|
border-left: 4px solid var(--primary-color); |
|
|
} |
|
|
|
|
|
.api-content { |
|
|
padding-left: 20px; |
|
|
} |
|
|
|
|
|
.api-title { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
background: linear-gradient(to right, var(--dark-color), var(--primary-color)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.api-desc { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.api-features { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.api-feature { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.api-feature-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
min-width: 40px; |
|
|
border-radius: 10px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-right: 15px; |
|
|
font-size: 1.2rem; |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
.api-feature-text h4 { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.api-feature-text p { |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-color); |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.projects { |
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%); |
|
|
} |
|
|
|
|
|
.projects-filter { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 15px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.filter-btn { |
|
|
padding: 10px 20px; |
|
|
background: var(--card-bg); |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
box-shadow: var(--card-shadow); |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.filter-btn.active, .filter-btn:hover { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.projects-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.project-item { |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
background: var(--card-bg); |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.project-item:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.project-img-container { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
height: 220px; |
|
|
} |
|
|
|
|
|
.project-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.project-item:hover .project-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.project-category { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 5px 15px; |
|
|
border-radius: 5px; |
|
|
font-size: 0.8rem; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.project-body { |
|
|
padding: 25px; |
|
|
} |
|
|
|
|
|
.project-title { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 10px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.project-desc { |
|
|
color: var(--text-color); |
|
|
font-size: 0.95rem; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.project-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding-top: 15px; |
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .project-meta { |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.project-client { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.client-img { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.client-name { |
|
|
font-size: 0.9rem; |
|
|
font-weight: 600; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.project-link { |
|
|
color: var(--primary-color); |
|
|
font-weight: 600; |
|
|
font-size: 0.9rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.project-link i { |
|
|
margin-left: 5px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.project-link:hover { |
|
|
color: var(--secondary-color); |
|
|
} |
|
|
|
|
|
.project-link:hover i { |
|
|
transform: translateX(3px); |
|
|
} |
|
|
|
|
|
|
|
|
.chatbot-widget { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
z-index: 999; |
|
|
} |
|
|
|
|
|
.chatbot-toggle { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
box-shadow: 0 5px 20px rgba(79, 172, 254, 0.5); |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.chatbot-toggle:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.chatbot-toggle.active i::before { |
|
|
content: "\\f00d"; |
|
|
} |
|
|
|
|
|
.chatbot-container { |
|
|
position: absolute; |
|
|
bottom: 75px; |
|
|
right: 0; |
|
|
width: 350px; |
|
|
height: 500px; |
|
|
background: var(--bg-color); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); |
|
|
display: none; |
|
|
flex-direction: column; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.chatbot-container.active { |
|
|
display: flex; |
|
|
animation: scaleUp 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes scaleUp { |
|
|
from { opacity: 0; transform: scale(0.9); } |
|
|
to { opacity: 1; transform: scale(1); } |
|
|
} |
|
|
|
|
|
.chatbot-header { |
|
|
padding: 15px 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.chatbot-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-right: 15px; |
|
|
color: var(--primary-color); |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.chatbot-title { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.chatbot-title h4 { |
|
|
margin-bottom: 0; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.chatbot-title span { |
|
|
font-size: 0.9rem; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.chatbot-messages { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.message { |
|
|
margin-bottom: 15px; |
|
|
max-width: 80%; |
|
|
} |
|
|
|
|
|
.message-bot { |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
.message-user { |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.message-content { |
|
|
padding: 12px 15px; |
|
|
border-radius: 10px; |
|
|
font-size: 0.95rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.message-bot .message-content { |
|
|
background: var(--card-bg); |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.message-user .message-content { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.message-bot .message-content::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: -8px; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
background: var(--card-bg); |
|
|
border-radius: 4px; |
|
|
transform: rotate(45deg); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.message-time { |
|
|
font-size: 0.8rem; |
|
|
color: rgba(0, 0, 0, 0.4); |
|
|
margin-top: 5px; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .message-time { |
|
|
color: rgba(255, 255, 255, 0.4); |
|
|
} |
|
|
|
|
|
.chatbot-footer { |
|
|
padding: 15px; |
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .chatbot-footer { |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.chatbot-input { |
|
|
flex: 1; |
|
|
border: none; |
|
|
outline: none; |
|
|
background: var(--card-bg); |
|
|
padding: 12px 15px; |
|
|
border-radius: 25px; |
|
|
font-size: 0.95rem; |
|
|
color: var(--text-color); |
|
|
font-family: inherit; |
|
|
} |
|
|
|
|
|
.chatbot-send { |
|
|
width: 45px; |
|
|
height: 45px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: none; |
|
|
margin-left: 10px; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.chatbot-send:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
|
|
|
.try-speedy { |
|
|
background: var(--bg-color); |
|
|
padding: 100px 0; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.speedy-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
opacity: 0.05; |
|
|
pointer-events: none; |
|
|
background-image: url('https://placehold.co/1200x800/4facfe/ffffff?text=Speed+Pattern'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.speedy-content { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.speedy-title { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
background: linear-gradient(to right, var(--dark-color), var(--primary-color)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.speedy-desc { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 50px; |
|
|
} |
|
|
|
|
|
.speedy-button { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: 15px 40px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
border-radius: 50px; |
|
|
font-size: 1.2rem; |
|
|
font-weight: 700; |
|
|
box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4); |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.speedy-button::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 0%; |
|
|
height: 100%; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
transition: var(--transition); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.speedy-button:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 40px rgba(79, 172, 254, 0.6); |
|
|
} |
|
|
|
|
|
.speedy-button:hover::before { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.speedy-button i { |
|
|
margin-right: 10px; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.services { |
|
|
background: var(--bg-color); |
|
|
} |
|
|
|
|
|
.services-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
background: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
text-align: center; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.service-card::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 150%; |
|
|
height: 100%; |
|
|
background: var(--primary-gradient); |
|
|
top: 0; |
|
|
left: -150%; |
|
|
transform: skewX(-30deg); |
|
|
transition: var(--transition); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.service-card:hover::before { |
|
|
left: -30%; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.service-card:hover .service-icon, |
|
|
.service-card:hover .service-title, |
|
|
.service-card:hover .service-text, |
|
|
.service-card:hover .btn-primary { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.service-card:hover .btn-primary { |
|
|
background: white; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.service-icon { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background: white; |
|
|
color: var(--primary-color); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
border-radius: 20px; |
|
|
margin: 0 auto 20px; |
|
|
font-size: 2rem; |
|
|
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2); |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.service-icon::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 20px; |
|
|
opacity: 0; |
|
|
z-index: -1; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.service-card:hover .service-icon::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.service-card:hover .service-icon { |
|
|
color: white; |
|
|
transform: rotateY(360deg); |
|
|
} |
|
|
|
|
|
.service-title { |
|
|
color: var(--dark-color); |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 15px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.service-text { |
|
|
font-size: 0.95rem; |
|
|
color: var(--text-color); |
|
|
margin-bottom: 20px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
|
|
|
.photo-gallery { |
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%); |
|
|
} |
|
|
|
|
|
.gallery-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
grid-auto-rows: 250px; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border-radius: 15px; |
|
|
cursor: pointer; |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.gallery-item:nth-child(4n+1) { |
|
|
grid-column: span 2; |
|
|
grid-row: span 1; |
|
|
} |
|
|
|
|
|
.gallery-item:nth-child(4n+2) { |
|
|
grid-column: span 1; |
|
|
grid-row: span 2; |
|
|
} |
|
|
|
|
|
.gallery-item:nth-child(4n+3) { |
|
|
grid-column: span 1; |
|
|
grid-row: span 1; |
|
|
} |
|
|
|
|
|
.gallery-item:nth-child(4n+4) { |
|
|
grid-column: span 2; |
|
|
grid-row: span 1; |
|
|
} |
|
|
|
|
|
.gallery-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.gallery-item:hover .gallery-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.gallery-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); |
|
|
opacity: 0; |
|
|
transition: var(--transition); |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
padding: 20px; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
.gallery-item:hover .gallery-overlay { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.gallery-title { |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.gallery-category { |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.gallery-icon { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
opacity: 0; |
|
|
transform: translateY(-20px); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.gallery-item:hover .gallery-icon { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
.video-gallery { |
|
|
background: var(--bg-color); |
|
|
padding: 80px 0; |
|
|
} |
|
|
|
|
|
.video-container { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
border-radius: 15px; |
|
|
box-shadow: var(--box-shadow); |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.video-container iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.video-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.video-item { |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
background: var(--card-bg); |
|
|
} |
|
|
|
|
|
.video-item:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.video-thumbnail { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.video-thumb-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.video-item:hover .video-thumb-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.video-play-button { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
transition: var(--transition); |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.video-item:hover .video-play-button { |
|
|
transform: translate(-50%, -50%) scale(1.1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.video-info { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.video-title { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 10px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.video-desc { |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-color); |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.video-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
font-size: 0.85rem; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.video-date { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.video-date i { |
|
|
margin-right: 5px; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.video-views { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.video-views i { |
|
|
margin-right: 5px; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
.news { |
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%); |
|
|
} |
|
|
|
|
|
.news-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.news-item { |
|
|
background: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.news-item:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.news-img-container { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.news-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.news-item:hover .news-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.news-category { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 5px 15px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.news-date { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
color: white; |
|
|
padding: 5px 15px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.news-date i { |
|
|
margin-right: 5px; |
|
|
} |
|
|
|
|
|
.news-body { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.news-title { |
|
|
color: var(--dark-color); |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.news-desc { |
|
|
font-size: 0.95rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.news-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-top: 20px; |
|
|
padding-top: 15px; |
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .news-meta { |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.news-author { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.author-img { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.author-name { |
|
|
font-size: 0.9rem; |
|
|
font-weight: 600; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.news-btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: 8px 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
transition: var(--transition); |
|
|
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2); |
|
|
} |
|
|
|
|
|
.news-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3); |
|
|
} |
|
|
|
|
|
.news-btn i { |
|
|
margin-left: 8px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.news-btn:hover i { |
|
|
transform: translateX(3px); |
|
|
} |
|
|
|
|
|
|
|
|
.articles { |
|
|
background: var(--bg-color); |
|
|
} |
|
|
|
|
|
.articles-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.article-item { |
|
|
display: flex; |
|
|
background: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.article-item:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.article-img-container { |
|
|
flex: 0 0 35%; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.article-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.article-item:hover .article-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.article-body { |
|
|
flex: 1; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.article-category { |
|
|
display: inline-block; |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
padding: 3px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.8rem; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.article-title { |
|
|
color: var(--dark-color); |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 10px; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
.article-desc { |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-color); |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.article-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
font-size: 0.85rem; |
|
|
} |
|
|
|
|
|
.article-date { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.article-date i { |
|
|
margin-right: 5px; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.article-read-more { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: var(--primary-color); |
|
|
font-weight: 600; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.article-read-more i { |
|
|
margin-left: 5px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.article-read-more:hover { |
|
|
color: var(--secondary-color); |
|
|
} |
|
|
|
|
|
.article-read-more:hover i { |
|
|
transform: translateX(3px); |
|
|
} |
|
|
|
|
|
|
|
|
.companies { |
|
|
background: var(--bg-color); |
|
|
padding: 80px 0; |
|
|
} |
|
|
|
|
|
.companies-title { |
|
|
text-align: center; |
|
|
margin-bottom: 50px; |
|
|
} |
|
|
|
|
|
.companies-title h2 { |
|
|
font-size: 2.5rem; |
|
|
color: var(--dark-color); |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.companies-title p { |
|
|
color: var(--text-color); |
|
|
font-size: 1.1rem; |
|
|
max-width: 700px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.companies-slider { |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
padding: 20px 0; |
|
|
} |
|
|
|
|
|
.companies-track { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
animation: scroll 20s linear infinite; |
|
|
width: calc(200px * 20); |
|
|
} |
|
|
|
|
|
@keyframes scroll { |
|
|
0% { |
|
|
transform: translateX(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateX(calc(-200px * 10)); |
|
|
} |
|
|
} |
|
|
|
|
|
.company-logo { |
|
|
width: 180px; |
|
|
height: 100px; |
|
|
margin: 0 20px; |
|
|
padding: 15px; |
|
|
background: var(--card-bg); |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.company-logo:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.company-logo img { |
|
|
max-width: 100%; |
|
|
max-height: 70px; |
|
|
filter: grayscale(100%); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.company-logo:hover img { |
|
|
filter: grayscale(0%); |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
background: var(--footer-bg); |
|
|
color: white; |
|
|
padding: 80px 0 0; |
|
|
} |
|
|
|
|
|
.footer-top { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 50px; |
|
|
padding-bottom: 50px; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.footer-widget { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.footer-title { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 20px; |
|
|
color: white; |
|
|
position: relative; |
|
|
padding-bottom: 15px; |
|
|
} |
|
|
|
|
|
.footer-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 40px; |
|
|
height: 3px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.footer-about p { |
|
|
margin-bottom: 20px; |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
.footer-links ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-links li { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
transition: var(--transition); |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.footer-links a::before { |
|
|
content: "→"; |
|
|
margin-right: 8px; |
|
|
opacity: 0; |
|
|
transform: translateX(-5px); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
color: var(--primary-color); |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.footer-links a:hover::before { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.footer-contact { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
} |
|
|
|
|
|
.footer-contact p { |
|
|
margin-bottom: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.footer-contact i { |
|
|
margin-right: 10px; |
|
|
color: var(--primary-color); |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.footer-subscribe form { |
|
|
display: flex; |
|
|
margin-bottom: 20px; |
|
|
overflow: hidden; |
|
|
border-radius: 8px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.footer-subscribe input { |
|
|
flex: 1; |
|
|
padding: 12px 15px; |
|
|
border: none; |
|
|
outline: none; |
|
|
font-family: inherit; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.footer-subscribe button { |
|
|
padding: 0 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.footer-subscribe button:hover { |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
padding: 30px 0; |
|
|
text-align: center; |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.footer-bottom a { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.stats-container, |
|
|
.partners-grid { |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
} |
|
|
|
|
|
.gallery-container, |
|
|
.video-grid, |
|
|
.news-container { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.pref-cards, |
|
|
.services-container, |
|
|
.projects-container { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.api-container { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.api-code { |
|
|
bottom: -20px; |
|
|
right: 20px; |
|
|
width: 260px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 992px) { |
|
|
.nav-list { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.mobile-toggle { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.hero-content, |
|
|
.about-content, |
|
|
.contact-container { |
|
|
flex-direction: column; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.hero-text, |
|
|
.about-text, |
|
|
.hero-image, |
|
|
.about-image { |
|
|
max-width: 100%; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
margin-bottom: 30px; |
|
|
order: -1; |
|
|
} |
|
|
|
|
|
.about-features { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.feature-item { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.features-container, |
|
|
.projects-container, |
|
|
.services-container, |
|
|
.articles-container { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.stats-container, |
|
|
.gallery-container, |
|
|
.partners-grid, |
|
|
.contact-container, |
|
|
.footer-top { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.contact-item { |
|
|
justify-content: flex-start; |
|
|
} |
|
|
|
|
|
.contact-title::after, |
|
|
.footer-title::after { |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.video-grid, |
|
|
.news-container { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.article-item { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.article-img-container { |
|
|
flex: 0 0 200px; |
|
|
} |
|
|
|
|
|
.preferences-tabs { |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.pref-tab { |
|
|
width: 100%; |
|
|
max-width: 300px; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.chatbot-container { |
|
|
width: 320px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero-title { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.section-title h2 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.features-container, |
|
|
.projects-container, |
|
|
.services-container, |
|
|
.stats-container, |
|
|
.gallery-container, |
|
|
.partners-grid, |
|
|
.footer-top, |
|
|
.articles-container, |
|
|
.pref-cards { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.language-selector, |
|
|
.theme-toggle { |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.contact-info, |
|
|
.contact-form { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.gallery-container { |
|
|
grid-auto-rows: 200px; |
|
|
} |
|
|
|
|
|
.gallery-item:nth-child(4n+1), |
|
|
.gallery-item:nth-child(4n+2), |
|
|
.gallery-item:nth-child(4n+3), |
|
|
.gallery-item:nth-child(4n+4) { |
|
|
grid-column: span 1; |
|
|
grid-row: span 1; |
|
|
} |
|
|
|
|
|
.top-nav-links { |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.top-nav-item { |
|
|
margin: 5px; |
|
|
} |
|
|
|
|
|
.chatbot-widget { |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
} |
|
|
|
|
|
.chatbot-toggle { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.chatbot-container { |
|
|
width: 300px; |
|
|
height: 450px; |
|
|
bottom: 65px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.hero-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.speedy-button { |
|
|
padding: 12px 25px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.chatbot-container { |
|
|
width: 290px; |
|
|
right: -20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.fade-in-up { |
|
|
animation: fadeInUp 0.5s ease forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
right: -300px; |
|
|
width: 300px; |
|
|
height: 100%; |
|
|
background: var(--bg-color); |
|
|
z-index: 200; |
|
|
padding: 80px 30px 30px; |
|
|
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1); |
|
|
transition: var(--transition); |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-menu { |
|
|
background: var(--card-bg); |
|
|
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.mobile-menu.active { |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
.mobile-menu-close { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
font-size: 1.5rem; |
|
|
background: none; |
|
|
border: none; |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.mobile-menu-close:hover { |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-menu-close { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.mobile-nav-list { |
|
|
list-style: none; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.mobile-nav-item { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.mobile-nav-link { |
|
|
color: var(--dark-color); |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
display: block; |
|
|
padding: 10px 15px; |
|
|
border-radius: 8px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-nav-link { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.mobile-nav-link:hover { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.mobile-language { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.mobile-language-title { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark-color); |
|
|
padding-bottom: 10px; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-language-title { |
|
|
color: var(--light-color); |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.mobile-language-options { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.mobile-language-option { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 8px 15px; |
|
|
background: var(--card-bg); |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.mobile-language-option:hover { |
|
|
background: var(--primary-gradient); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.mobile-language-option:hover .mobile-language-name { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-language-flag { |
|
|
width: 20px; |
|
|
height: 15px; |
|
|
margin-right: 5px; |
|
|
border-radius: 2px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.mobile-language-name { |
|
|
font-size: 0.9rem; |
|
|
color: var(--dark-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-language-name { |
|
|
color: var(--light-color); |
|
|
} |
|
|
|
|
|
.overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
z-index: 150; |
|
|
display: none; |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
|
|
|
.overlay.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
[lang="ar"] .ar-content { display: block; } |
|
|
[lang="ar"] .en-content, |
|
|
[lang="ar"] .fr-content, |
|
|
[lang="ar"] .de-content { display: none; } |
|
|
|
|
|
[lang="en"] .en-content { display: block; } |
|
|
[lang="en"] .ar-content, |
|
|
[lang="en"] .fr-content, |
|
|
[lang="en"] .de-content { display: none; } |
|
|
|
|
|
[lang="fr"] .fr-content { display: block; } |
|
|
[lang="fr"] .ar-content, |
|
|
[lang="fr"] .en-content, |
|
|
[lang="fr"] .de-content { display: none; } |
|
|
|
|
|
[lang="de"] .de-content { display: block; } |
|
|
[lang="de"] .ar-content, |
|
|
[lang="de"] .en-content, |
|
|
[lang="de"] .fr-content { display: none; } |
|
|
|
|
|
.text-center { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.social-link { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.social-link:hover { |
|
|
background: var(--primary-gradient); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="animated-bg" id="animated-bg"></div> |
|
|
|
|
|
|
|
|
<div class="top-nav"> |
|
|
<div class="container top-nav-container"> |
|
|
<div class="top-nav-left"> |
|
|
<ul class="top-nav-links"> |
|
|
<li class="top-nav-item"> |
|
|
<a href="index.html" class="top-nav-link"> |
|
|
<span class="ar-content">الرئيسية</span> |
|
|
<span class="en-content">Home</span> |
|
|
<span class="fr-content">Accueil</span> |
|
|
<span class="de-content">Startseite</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="about.html" class="top-nav-link"> |
|
|
<span class="ar-content">من نحن</span> |
|
|
<span class="en-content">About</span> |
|
|
<span class="fr-content">À Propos</span> |
|
|
<span class="de-content">Über Uns</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="services.html" class="top-nav-link"> |
|
|
<img src="https://placehold.co/20x20/4facfe/ffffff?text=S" alt="Services"> |
|
|
<span class="ar-content">خدماتنا</span> |
|
|
<span class="en-content">Services</span> |
|
|
<span class="fr-content">Services</span> |
|
|
<span class="de-content">Dienstleistungen</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="projects.html" class="top-nav-link"> |
|
|
<img src="https://placehold.co/20x20/4facfe/ffffff?text=P" alt="Projects"> |
|
|
<span class="ar-content">مشاريعنا</span> |
|
|
<span class="en-content">Projects</span> |
|
|
<span class="fr-content">Projets</span> |
|
|
<span class="de-content">Projekte</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="speedy.html" class="top-nav-link"> |
|
|
<span class="ar-content">جرب SPEEDY</span> |
|
|
<span class="en-content">Try SPEEDY</span> |
|
|
<span class="fr-content">Essayez SPEEDY</span> |
|
|
<span class="de-content">SPEEDY ausprobieren</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="api.html" class="top-nav-link"> |
|
|
<span class="ar-content">خدمات API</span> |
|
|
<span class="en-content">API Services</span> |
|
|
<span class="fr-content">Services API</span> |
|
|
<span class="de-content">API-Dienste</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="companies.html" class="top-nav-link"> |
|
|
<span class="ar-content">تفضيلات الشركات</span> |
|
|
<span class="en-content">Company Preferences</span> |
|
|
<span class="fr-content">Préférences Entreprises</span> |
|
|
<span class="de-content">Unternehmenspräferenzen</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="photos.html" class="top-nav-link"> |
|
|
<span class="ar-content">معرض الصور</span> |
|
|
<span class="en-content">Photo Gallery</span> |
|
|
<span class="fr-content">Galerie Photos</span> |
|
|
<span class="de-content">Fotogalerie</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="videos.html" class="top-nav-link"> |
|
|
<span class="ar-content">معرض الفيديو</span> |
|
|
<span class="en-content">Video Gallery</span> |
|
|
<span class="fr-content">Galerie Vidéos</span> |
|
|
<span class="de-content">Videogalerie</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="news.html" class="top-nav-link"> |
|
|
<span class="ar-content">الأخبار</span> |
|
|
<span class="en-content">News</span> |
|
|
<span class="fr-content">Actualités</span> |
|
|
<span class="de-content">Nachrichten</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="articles.html" class="top-nav-link"> |
|
|
<span class="ar-content">المقالات</span> |
|
|
<span class="en-content">Articles</span> |
|
|
<span class="fr-content">Articles</span> |
|
|
<span class="de-content">Artikel</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="top-nav-item"> |
|
|
<a href="contact.html" class="top-nav-link"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact</span> |
|
|
<span class="fr-content">Contact</span> |
|
|
<span class="de-content">Kontakt</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="header"> |
|
|
<div class="container"> |
|
|
<nav class="navbar"> |
|
|
<div class="logo"> |
|
|
<div class="logo-img"> |
|
|
<img src="https://placehold.co/40x40/4facfe/ffffff?text=FP" alt="فاست برو"> |
|
|
</div> |
|
|
<h1 class="logo-text"> |
|
|
<span class="logo-text-animated" id="logo-text">فاست برو</span> |
|
|
</h1> |
|
|
</div> |
|
|
<div class="nav-menu"> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="index.html" class="nav-link active"> |
|
|
<span class="ar-content">الرئيسية</span> |
|
|
<span class="en-content">Home</span> |
|
|
<span class="fr-content">Accueil</span> |
|
|
<span class="de-content">Startseite</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="nav-item has-dropdown"> |
|
|
<a href="#" class="nav-link"> |
|
|
<span class="ar-content">خدماتنا</span> |
|
|
<span class="en-content">Services</span> |
|
|
<span class="fr-content">Services</span> |
|
|
<span class="de-content">Dienstleistungen</span> |
|
|
</a> |
|
|
<div class="dropdown-menu"> |
|
|
<a href="ai-solutions.html" class="dropdown-item"> |
|
|
<span class="ar-content">حلول الذكاء الاصطناعي</span> |
|
|
<span class="en-content">AI Solutions</span> |
|
|
<span class="fr-content">Solutions d'IA</span> |
|
|
<span class="de-content">KI-Lösungen</span> |
|
|
</a> |
|
|
<a href="machine-learning.html" class="dropdown-item"> |
|
|
<span class="ar-content">تعلم الآلة</span> |
|
|
<span class="en-content">Machine Learning</span> |
|
|
<span class="fr-content">Apprentissage Automatique</span> |
|
|
<span class="de-content">Maschinelles Lernen</span> |
|
|
</a> |
|
|
<div class="dropdown-divider"></div> |
|
|
<a href="api-services.html" class="dropdown-item"> |
|
|
<span class="ar-content">خدمات API</span> |
|
|
<span class="en-content">API Services</span> |
|
|
<span class="fr-content">Services API</span> |
|
|
<span class="de-content">API-Dienste</span> |
|
|
</a> |
|
|
</div> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="projects.html" class="nav-link"> |
|
|
<img src="https://placehold.co/20x20/4facfe/ffffff?text=P" alt="Projects"> |
|
|
<span class="ar-content">مشاريعنا</span> |
|
|
<span class="en-content">Projects</span> |
|
|
<span class="fr-content">Projets</span> |
|
|
<span class="de-content">Projekte</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="speedy.html" class="nav-link"> |
|
|
<span class="ar-content">جرب SPEEDY</span> |
|
|
<span class="en-content">Try SPEEDY</span> |
|
|
<span class="fr-content">Essayez SPEEDY</span> |
|
|
<span class="de-content">SPEEDY ausprobieren</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="contact.html" class="nav-link"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact</span> |
|
|
<span class="fr-content">Contact</span> |
|
|
<span class="de-content">Kontakt</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="nav-buttons"> |
|
|
<div class="language-selector"> |
|
|
<div class="language-current"> |
|
|
<img src="https://placehold.co/20x15/ff0000/ffffff.png?text=AR" alt="العربية" class="language-flag" id="current-flag"> |
|
|
<span id="current-language">العربية</span> |
|
|
</div> |
|
|
<div class="language-options"> |
|
|
<div class="language-option" data-lang="ar"> |
|
|
<img src="https://placehold.co/20x15/ff0000/ffffff.png?text=AR" alt="العربية" class="language-flag"> |
|
|
<span>العربية</span> |
|
|
</div> |
|
|
<div class="language-option" data-lang="en"> |
|
|
<img src="https://placehold.co/20x15/0000ff/ffffff.png?text=EN" alt="English" class="language-flag"> |
|
|
<span>English</span> |
|
|
</div> |
|
|
<div class="language-option" data-lang="fr"> |
|
|
<img src="https://placehold.co/20x15/0055a4/ffffff.png?text=FR" alt="Français" class="language-flag"> |
|
|
<span>Français</span> |
|
|
</div> |
|
|
<div class="language-option" data-lang="de"> |
|
|
<img src="https://placehold.co/20x15/000000/ffcc00.png?text=DE" alt="Deutsch" class="language-flag"> |
|
|
<span>Deutsch</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="theme-toggle"> |
|
|
<div class="toggle-circle"></div> |
|
|
</div> |
|
|
<button class="search-toggle"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="mobile-toggle"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="mobile-menu"> |
|
|
<button class="mobile-menu-close"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<ul class="mobile-nav-list"> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="index.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">الرئيسية</span> |
|
|
<span class="en-content">Home</span> |
|
|
<span class="fr-content">Accueil</span> |
|
|
<span class="de-content">Startseite</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="about.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">من نحن</span> |
|
|
<span class="en-content">About</span> |
|
|
<span class="fr-content">À Propos</span> |
|
|
<span class="de-content">Über Uns</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="services.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">خدماتنا</span> |
|
|
<span class="en-content">Services</span> |
|
|
<span class="fr-content">Services</span> |
|
|
<span class="de-content">Dienstleistungen</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="projects.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">مشاريعنا</span> |
|
|
<span class="en-content">Projects</span> |
|
|
<span class="fr-content">Projets</span> |
|
|
<span class="de-content">Projekte</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="speedy.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">جرب SPEEDY</span> |
|
|
<span class="en-content">Try SPEEDY</span> |
|
|
<span class="fr-content">Essayez SPEEDY</span> |
|
|
<span class="de-content">SPEEDY ausprobieren</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="api.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">خدمات API</span> |
|
|
<span class="en-content">API Services</span> |
|
|
<span class="fr-content">Services API</span> |
|
|
<span class="de-content">API-Dienste</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="companies.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">تفضيلات الشركات</span> |
|
|
<span class="en-content">Company Preferences</span> |
|
|
<span class="fr-content">Préférences Entreprises</span> |
|
|
<span class="de-content">Unternehmenspräferenzen</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="photos.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">معرض الصور</span> |
|
|
<span class="en-content">Photo Gallery</span> |
|
|
<span class="fr-content">Galerie Photos</span> |
|
|
<span class="de-content">Fotogalerie</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="videos.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">معرض الفيديو</span> |
|
|
<span class="en-content">Video Gallery</span> |
|
|
<span class="fr-content">Galerie Vidéos</span> |
|
|
<span class="de-content">Videogalerie</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="news.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">الأخبار</span> |
|
|
<span class="en-content">News</span> |
|
|
<span class="fr-content">Actualités</span> |
|
|
<span class="de-content">Nachrichten</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="articles.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">المقالات</span> |
|
|
<span class="en-content">Articles</span> |
|
|
<span class="fr-content">Articles</span> |
|
|
<span class="de-content">Artikel</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mobile-nav-item"> |
|
|
<a href="contact.html" class="mobile-nav-link"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact</span> |
|
|
<span class="fr-content">Contact</span> |
|
|
<span class="de-content">Kontakt</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mobile-language"> |
|
|
<h3 class="mobile-language-title"> |
|
|
<span class="ar-content">اختر اللغة</span> |
|
|
<span class="en-content">Select Language</span> |
|
|
<span class="fr-content">Choisir la Langue</span> |
|
|
<span class="de-content">Sprache Wählen</span> |
|
|
</h3> |
|
|
<div class="mobile-language-options"> |
|
|
<div class="mobile-language-option" data-lang="ar"> |
|
|
<img src="https://placehold.co/20x15/ff0000/ffffff.png?text=AR" alt="العربية" class="mobile-language-flag"> |
|
|
<span class="mobile-language-name">العربية</span> |
|
|
</div> |
|
|
<div class="mobile-language-option" data-lang="en"> |
|
|
<img src="https://placehold.co/20x15/0000ff/ffffff.png?text=EN" alt="English" class="mobile-language-flag"> |
|
|
<span class="mobile-language-name">English</span> |
|
|
</div> |
|
|
<div class="mobile-language-option" data-lang="fr"> |
|
|
<img src="https://placehold.co/20x15/0055a4/ffffff.png?text=FR" alt="Français" class="mobile-language-flag"> |
|
|
<span class="mobile-language-name">Français</span> |
|
|
</div> |
|
|
<div class="mobile-language-option" data-lang="de"> |
|
|
<img src="https://placehold.co/20x15/000000/ffcc00.png?text=DE" alt="Deutsch" class="mobile-language-flag"> |
|
|
<span class="mobile-language-name">Deutsch</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="overlay"></div> |
|
|
|
|
|
|
|
|
<div class="search-modal"> |
|
|
<div class="search-container"> |
|
|
<form class="search-form"> |
|
|
<input type="text" class="search-input" placeholder="ابحث هنا..." id="search-input"> |
|
|
<button type="submit" class="search-submit"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
<button class="search-close"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero section" id="home"> |
|
|
<div class="hero-shapes"> |
|
|
<div class="shape shape-1"></div> |
|
|
<div class="shape shape-2"></div> |
|
|
<div class="shape shape-3"></div> |
|
|
</div> |
|
|
<div class="container"> |
|
|
<div class="hero-content"> |
|
|
<div class="hero-text" data-aos="fade-up" data-aos-delay="100"> |
|
|
<span class="hero-subtitle"> |
|
|
<span class="ar-content">حلول الذكاء الاصطناعي المتقدمة</span> |
|
|
<span class="en-content">Advanced AI Solutions</span> |
|
|
<span class="fr-content">Solutions d'IA Avancées</span> |
|
|
<span class="de-content">Fortgeschrittene KI-Lösungen</span> |
|
|
</span> |
|
|
<h1 class="hero-title"> |
|
|
<span class="ar-content">ابتكار المستقبل مع فاست برو للذكاء الاصطناعي</span> |
|
|
<span class="en-content">Innovating the Future with FastPro AI</span> |
|
|
<span class="fr-content">Innover l'Avenir avec FastPro IA</span> |
|
|
<span class="de-content">Innovation der Zukunft mit FastPro KI</span> |
|
|
</h1> |
|
|
<div class="typewriter-container"> |
|
|
<div class="typewriter-text" id="typewriter-text"></div> |
|
|
</div> |
|
|
<p class="hero-description"> |
|
|
<span class="ar-content">نقدم حلول ذكاء اصطناعي متطورة تساعد الشركات على النمو والتطور في عالم التكنولوجيا المتسارع. خبراؤنا يصممون حلولًا مخصصة تناسب احتياجاتك الفريدة.</span> |
|
|
<span class="en-content">We provide advanced AI solutions that help companies grow and evolve in the fast-paced technology world. Our experts design customized solutions to meet your unique needs.</span> |
|
|
<span class="fr-content">Nous proposons des solutions d'IA avancées qui aident les entreprises à se développer dans un monde technologique en évolution rapide. Nos experts conçoivent des solutions personnalisées pour répondre à vos besoins uniques.</span> |
|
|
<span class="de-content">Wir bieten fortschrittliche KI-Lösungen, die Unternehmen helfen, in der schnelllebigen Technologiewelt zu wachsen. Unsere Experten entwickeln maßgeschneiderte Lösungen für Ihre einzigartigen Anforderungen.</span> |
|
|
</p> |
|
|
<div class="hero-buttons"> |
|
|
<a href="services.html" class="btn btn-primary"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
<span class="ar-content">استكشف خدماتنا</span> |
|
|
<span class="en-content">Explore Our Services</span> |
|
|
<span class="fr-content">Découvrir Nos Services</span> |
|
|
<span class="de-content">Entdecken Sie Unsere Dienstleistungen</span> |
|
|
</a> |
|
|
<a href="contact.html" class="btn btn-outline"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact Us</span> |
|
|
<span class="fr-content">Contactez-Nous</span> |
|
|
<span class="de-content">Kontaktieren Sie Uns</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-image" data-aos="fade-up" data-aos-delay="300"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="AI Technology" class="hero-img"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="try-speedy"> |
|
|
<div class="speedy-bg"></div> |
|
|
<div class="container"> |
|
|
<div class="speedy-content" data-aos="fade-up"> |
|
|
<h2 class="speedy-title"> |
|
|
<span class="ar-content">جرّب منصة SPEEDY الآن</span> |
|
|
<span class="en-content">Try SPEEDY Platform Now</span> |
|
|
<span class="fr-content">Essayez la Plateforme SPEEDY Maintenant</span> |
|
|
<span class="de-content">Probieren Sie die SPEEDY-Plattform Jetzt</span> |
|
|
</h2> |
|
|
<p class="speedy-desc"> |
|
|
<span class="ar-content">اكتشف قوة الذكاء الاصطناعي المتطور مع منصة SPEEDY. تجربة مجانية لمدة 14 يوم بجميع المميزات.</span> |
|
|
<span class="en-content">Discover the power of advanced AI with the SPEEDY platform. Free 14-day trial with all features.</span> |
|
|
<span class="fr-content">Découvrez la puissance de l'IA avancée avec la plateforme SPEEDY. Essai gratuit de 14 jours avec toutes les fonctionnalités.</span> |
|
|
<span class="de-content">Entdecken Sie die Kraft fortschrittlicher KI mit der SPEEDY-Plattform. Kostenlose 14-tägige Testversion mit allen Funktionen.</span> |
|
|
</p> |
|
|
<a href="speedy.html" class="speedy-button"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
<span class="ar-content">جرّب مجاناً</span> |
|
|
<span class="en-content">Try Free</span> |
|
|
<span class="fr-content">Essai Gratuit</span> |
|
|
<span class="de-content">Kostenlos Testen</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="about section" id="about"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">من نحن</span> |
|
|
<span class="en-content">About Us</span> |
|
|
<span class="fr-content">À Propos de Nous</span> |
|
|
<span class="de-content">Über Uns</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="about-content"> |
|
|
<div class="about-image" data-aos="fade-right"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="About FastPro" class="about-img"> |
|
|
</div> |
|
|
<div class="about-text" data-aos="fade-left"> |
|
|
<h3 class="about-title"> |
|
|
<span class="ar-content">رواد حلول الذكاء الاصطناعي في المنطقة</span> |
|
|
<span class="en-content">Leaders in AI Solutions in the Region</span> |
|
|
<span class="fr-content">Leaders des Solutions d'IA dans la Région</span> |
|
|
<span class="de-content">Führend bei KI-Lösungen in der Region</span> |
|
|
</h3> |
|
|
<p class="about-description"> |
|
|
<span class="ar-content">فاست برو هي شركة رائدة في مجال تطوير حلول الذكاء الاصطناعي المبتكرة، نسعى لتمكين المؤسسات من استثمار قوة التكنولوجيا الحديثة لتحقيق نمو مستدام وتميز تنافسي.</span> |
|
|
<span class="en-content">FastPro is a leading company in developing innovative AI solutions, seeking to enable organizations to harness the power of modern technology to achieve sustainable growth and competitive excellence.</span> |
|
|
<span class="fr-content">FastPro est une entreprise leader dans le développement de solutions d'IA innovantes, cherchant à permettre aux organisations d'exploiter la puissance de la technologie moderne pour atteindre une croissance durable et une excellence compétitive.</span> |
|
|
<span class="de-content">FastPro ist ein führendes Unternehmen bei der Entwicklung innovativer KI-Lösungen, das Organisationen in die Lage versetzen will, die Kraft moderner Technologie zu nutzen, um nachhaltiges Wachstum und Wettbewerbsvorteile zu erzielen.</span> |
|
|
</p> |
|
|
<div class="about-features"> |
|
|
<div class="feature-item"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div class="feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">خبرة متخصصة</span> |
|
|
<span class="en-content">Specialized Expertise</span> |
|
|
<span class="fr-content">Expertise Spécialisée</span> |
|
|
<span class="de-content">Spezialisierte Expertise</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">فريق من الخبراء المتخصصين في مجالات الذكاء الاصطناعي وتعلم الآلة.</span> |
|
|
<span class="en-content">A team of experts specialized in the fields of artificial intelligence and machine learning.</span> |
|
|
<span class="fr-content">Une équipe d'experts spécialisés dans les domaines de l'intelligence artificielle et de l'apprentissage automatique.</span> |
|
|
<span class="de-content">Ein Team von Experten, die auf künstliche Intelligenz und maschinelles Lernen spezialisiert sind.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="feature-item"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<div class="feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">حلول مبتكرة</span> |
|
|
<span class="en-content">Innovative Solutions</span> |
|
|
<span class="fr-content">Solutions Innovantes</span> |
|
|
<span class="de-content">Innovative Lösungen</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">نصمم حلولًا مبتكرة تناسب احتياجات عملائنا الفريدة.</span> |
|
|
<span class="en-content">We design innovative solutions that fit our customers' unique needs.</span> |
|
|
<span class="fr-content">Nous concevons des solutions innovantes adaptées aux besoins uniques de nos clients.</span> |
|
|
<span class="de-content">Wir entwickeln innovative Lösungen, die auf die individuellen Bedürfnisse unserer Kunden zugeschnitten sind.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="feature-item"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-cogs"></i> |
|
|
</div> |
|
|
<div class="feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">تكنولوجيا متطورة</span> |
|
|
<span class="en-content">Advanced Technology</span> |
|
|
<span class="fr-content">Technologie Avancée</span> |
|
|
<span class="de-content">Fortschrittliche Technologie</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">نستخدم أحدث التقنيات لتطوير حلول عالية الجودة.</span> |
|
|
<span class="en-content">We use the latest technologies to develop high-quality solutions.</span> |
|
|
<span class="fr-content">Nous utilisons les dernières technologies pour développer des solutions de haute qualité.</span> |
|
|
<span class="de-content">Wir verwenden die neuesten Technologien, um hochwertige Lösungen zu entwickeln.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="feature-item"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-headset"></i> |
|
|
</div> |
|
|
<div class="feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">دعم مستمر</span> |
|
|
<span class="en-content">Continuous Support</span> |
|
|
<span class="fr-content">Support Continu</span> |
|
|
<span class="de-content">Kontinuierliche Unterstützung</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">نقدم دعمًا مستمرًا لضمان نجاح مشروعك على المدى الطويل.</span> |
|
|
<span class="en-content">We provide continuous support to ensure the long-term success of your project.</span> |
|
|
<span class="fr-content">Nous fournissons un soutien continu pour assurer le succès à long terme de votre projet.</span> |
|
|
<span class="de-content">Wir bieten kontinuierliche Unterstützung, um den langfristigen Erfolg Ihres Projekts zu gewährleisten.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="contact.html" class="btn btn-primary"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact Us</span> |
|
|
<span class="fr-content">Contactez-Nous</span> |
|
|
<span class="de-content">Kontaktieren Sie Uns</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="preferences section" id="preferences"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">تفضيلات خاصة</span> |
|
|
<span class="en-content">Special Preferences</span> |
|
|
<span class="fr-content">Préférences Spéciales</span> |
|
|
<span class="de-content">Besondere Präferenzen</span> |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="preferences-tabs" data-aos="fade-up"> |
|
|
<div class="pref-tab active" data-tab="individuals"> |
|
|
<i class="fas fa-user"></i> |
|
|
<span class="ar-content">للأفراد</span> |
|
|
<span class="en-content">For Individuals</span> |
|
|
<span class="fr-content">Pour Individus</span> |
|
|
<span class="de-content">Für Einzelpersonen</span> |
|
|
</div> |
|
|
<div class="pref-tab" data-tab="startups"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
<span class="ar-content">للشركات الناشئة</span> |
|
|
<span class="en-content">For Startups</span> |
|
|
<span class="fr-content">Pour Startups</span> |
|
|
<span class="de-content">Für Startups</span> |
|
|
</div> |
|
|
<div class="pref-tab" data-tab="enterprises"> |
|
|
<i class="fas fa-building"></i> |
|
|
<span class="ar-content">للشركات الكبيرة</span> |
|
|
<span class="en-content">For Enterprises</span> |
|
|
<span class="fr-content">Pour Entreprises</span> |
|
|
<span class="de-content">Für Unternehmen</span> |
|
|
</div> |
|
|
<div class="pref-tab" data-tab="government"> |
|
|
<i class="fas fa-landmark"></i> |
|
|
<span class="ar-content">للجهات الحكومية</span> |
|
|
<span class="en-content">For Government</span> |
|
|
<span class="fr-content">Pour Gouvernement</span> |
|
|
<span class="de-content">Für Regierungen</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pref-content active" id="individuals-content" data-aos="fade-up"> |
|
|
<div class="pref-cards"> |
|
|
<div class="pref-card"> |
|
|
<div class="pref-icon"> |
|
|
<i class="fas fa-layer-group"></i> |
|
|
</div> |
|
|
<h3 class="pref-title"> |
|
|
<span class="ar-content">الباقة الأساسية</span> |
|
|
<span class="en-content">Basic Package</span> |
|
|
<span class="fr-content">Forfait de Base</span> |
|
|
<span class="de-content">Basispaket</span> |
|
|
</h3> |
|
|
<p class="pref-desc"> |
|
|
<span class="ar-content">مثالية للأفراد والاستخدام الشخصي مع المميزات الأساسية.</span> |
|
|
<span class="en-content">Perfect for individuals and personal use with basic features.</span> |
|
|
<span class="fr-content">Parfait pour les individus et l'usage personnel avec des fonctionnalités de base.</span> |
|
|
<span class="de-content">Perfekt für Einzelpersonen und persönliche Nutzung mit grundlegenden Funktionen.</span> |
|
|
</p> |
|
|
<ul class="pref-features"> |
|
|
<li> |
|
|
<span class="ar-content">وصول لنماذج الذكاء الاصطناعي الأساسية</span> |
|
|
<span class="en-content">Access to basic AI models</span> |
|
|
<span class="fr-content">Accès aux modèles d'IA de base</span> |
|
|
<span class="de-content">Zugriff auf grundlegende KI-Modelle</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">إنشاء مشروع واحد</span> |
|
|
<span class="en-content">Create one project</span> |
|
|
<span class="fr-content">Créer un projet</span> |
|
|
<span class="de-content">Ein Projekt erstellen</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">دعم فني عبر البريد الإلكتروني</span> |
|
|
<span class="en-content">Email support</span> |
|
|
<span class="fr-content">Support par email</span> |
|
|
<span class="de-content">E-Mail-Support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="contact.html" class="btn-contact"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact Us</span> |
|
|
<span class="fr-content">Contactez-Nous</span> |
|
|
<span class="de-content">Kontaktieren Sie Uns</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="pref-card"> |
|
|
<div class="pref-icon"> |
|
|
<i class="fas fa-cube"></i> |
|
|
</div> |
|
|
<h3 class="pref-title"> |
|
|
<span class="ar-content">الباقة الاحترافية</span> |
|
|
<span class="en-content">Professional Package</span> |
|
|
<span class="fr-content">Forfait Professionnel</span> |
|
|
<span class="de-content">Professionelles Paket</span> |
|
|
</h3> |
|
|
<p class="pref-desc"> |
|
|
<span class="ar-content">للمستخدمين المتقدمين الذين يحتاجون إلى ميزات إضافية وأداء أفضل.</span> |
|
|
<span class="en-content">For advanced users who need additional features and better performance.</span> |
|
|
<span class="fr-content">Pour les utilisateurs avancés qui ont besoin de fonctionnalités supplémentaires et de meilleures performances.</span> |
|
|
<span class="de-content">Für fortgeschrittene Benutzer, die zusätzliche Funktionen und bessere Leistung benötigen.</span> |
|
|
</p> |
|
|
<ul class="pref-features"> |
|
|
<li> |
|
|
<span class="ar-content">جميع ميزات الباقة الأساسية</span> |
|
|
<span class="en-content">All Basic Package features</span> |
|
|
<span class="fr-content">Toutes les fonctionnalités du forfait de base</span> |
|
|
<span class="de-content">Alle Funktionen des Basispakets</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">وصول لنماذج الذكاء الاصطناعي المتقدمة</span> |
|
|
<span class="en-content">Access to advanced AI models</span> |
|
|
<span class="fr-content">Accès aux modèles d'IA avancés</span> |
|
|
<span class="de-content">Zugriff auf fortgeschrittene KI-Modelle</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">إنشاء 5 مشاريع</span> |
|
|
<span class="en-content">Create 5 projects</span> |
|
|
<span class="fr-content">Créer 5 projets</span> |
|
|
<span class="de-content">5 Projekte erstellen</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">دعم فني أولوية قصوى</span> |
|
|
<span class="en-content">Priority support</span> |
|
|
<span class="fr-content">Support prioritaire</span> |
|
|
<span class="de-content">Prioritäts-Support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="contact.html" class="btn-contact"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact Us</span> |
|
|
<span class="fr-content">Contactez-Nous</span> |
|
|
<span class="de-content">Kontaktieren Sie Uns</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="pref-card"> |
|
|
<div class="pref-icon"> |
|
|
<i class="fas fa-gem"></i> |
|
|
</div> |
|
|
<h3 class="pref-title"> |
|
|
<span class="ar-content">الباقة المتميزة</span> |
|
|
<span class="en-content">Premium Package</span> |
|
|
<span class="fr-content">Forfait Premium</span> |
|
|
<span class="de-content">Premium-Paket</span> |
|
|
</h3> |
|
|
<p class="pref-desc"> |
|
|
<span class="ar-content">أقصى قدر من الأداء والمرونة للمشاريع المتطورة والاستخدام المكثف.</span> |
|
|
<span class="en-content">Maximum performance and flexibility for sophisticated projects and intensive use.</span> |
|
|
<span class="fr-content">Performance et flexibilité maximales pour des projets sophistiqués et une utilisation intensive.</span> |
|
|
<span class="de-content">Maximale Leistung und Flexibilität für anspruchsvolle Projekte und intensive Nutzung.</span> |
|
|
</p> |
|
|
<ul class="pref-features"> |
|
|
<li> |
|
|
<span class="ar-content">جميع ميزات الباقة الاحترافية</span> |
|
|
<span class="en-content">All Professional Package features</span> |
|
|
<span class="fr-content">Toutes les fonctionnalités du forfait professionnel</span> |
|
|
<span class="de-content">Alle Funktionen des professionellen Pakets</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">وصول لكافة نماذج الذكاء الاصطناعي</span> |
|
|
<span class="en-content">Access to all AI models</span> |
|
|
<span class="fr-content">Accès à tous les modèles d'IA</span> |
|
|
<span class="de-content">Zugriff auf alle KI-Modelle</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">مشاريع غير محدودة</span> |
|
|
<span class="en-content">Unlimited projects</span> |
|
|
<span class="fr-content">Projets illimités</span> |
|
|
<span class="de-content">Unbegrenzte Projekte</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="ar-content">مدير حساب مخصص</span> |
|
|
<span class="en-content">Dedicated account manager</span> |
|
|
<span class="fr-content">Gestionnaire de compte dédié</span> |
|
|
<span class="de-content">Dedizierter Account-Manager</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="contact.html" class="btn-contact"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact Us</span> |
|
|
<span class="fr-content">Contactez-Nous</span> |
|
|
<span class="de-content">Kontaktieren Sie Uns</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pref-content" id="startups-content"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="pref-content" id="enterprises-content"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="pref-content" id="government-content"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="api-services section" id="api"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">خدمات API</span> |
|
|
<span class="en-content">API Services</span> |
|
|
<span class="fr-content">Services API</span> |
|
|
<span class="de-content">API-Dienste</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="api-container"> |
|
|
<div class="api-image" data-aos="fade-right"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=API+Services" alt="API Services" class="api-img"> |
|
|
<div class="api-code"> |
|
|
<code> |
|
|
POST /api/v1/analyze<br> |
|
|
{<br> |
|
|
"text": "your text",<br> |
|
|
"model": "fastpro-v3"<br> |
|
|
} |
|
|
</code> |
|
|
</div> |
|
|
</div> |
|
|
<div class="api-content" data-aos="fade-left"> |
|
|
<h3 class="api-title"> |
|
|
<span class="ar-content">قوة الذكاء الاصطناعي في تطبيقاتك</span> |
|
|
<span class="en-content">AI Power in Your Applications</span> |
|
|
<span class="fr-content">Puissance de l'IA dans Vos Applications</span> |
|
|
<span class="de-content">KI-Power in Ihren Anwendungen</span> |
|
|
</h3> |
|
|
<p class="api-desc"> |
|
|
<span class="ar-content">قم بدمج خدمات الذكاء الاصطناعي المتطورة من فاست برو في تطبيقاتك وخدماتك من خلال واجهات برمجة التطبيقات (API) السهلة الاستخدام والقوية.</span> |
|
|
<span class="en-content">Integrate FastPro's advanced AI services into your applications and services through easy-to-use and powerful APIs.</span> |
|
|
<span class="fr-content">Intégrez les services d'IA avancés de FastPro dans vos applications et services grâce à des API faciles à utiliser et puissantes.</span> |
|
|
<span class="de-content">Integrieren Sie die fortschrittlichen KI-Dienste von FastPro in Ihre Anwendungen und Dienste durch einfach zu verwendende und leistungsstarke APIs.</span> |
|
|
</p> |
|
|
<div class="api-features"> |
|
|
<div class="api-feature"> |
|
|
<div class="api-feature-icon"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<div class="api-feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">واجهات برمجة سهلة الاستخدام</span> |
|
|
<span class="en-content">Easy-to-Use APIs</span> |
|
|
<span class="fr-content">API Faciles à Utiliser</span> |
|
|
<span class="de-content">Einfach zu verwendende APIs</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">توثيق شامل وأمثلة كود لمختلف لغات البرمجة.</span> |
|
|
<span class="en-content">Comprehensive documentation and code examples for various programming languages.</span> |
|
|
<span class="fr-content">Documentation complète et exemples de code pour différents langages de programmation.</span> |
|
|
<span class="de-content">Umfassende Dokumentation und Codebeispiele für verschiedene Programmiersprachen.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<div class="api-feature-icon"> |
|
|
<i class="fas fa-tachometer-alt"></i> |
|
|
</div> |
|
|
<div class="api-feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">أداء عالي</span> |
|
|
<span class="en-content">High Performance</span> |
|
|
<span class="fr-content">Haute Performance</span> |
|
|
<span class="de-content">Hohe Leistung</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">معالجة سريعة للطلبات مع زمن استجابة منخفض.</span> |
|
|
<span class="en-content">Fast request processing with low response time.</span> |
|
|
<span class="fr-content">Traitement rapide des demandes avec un temps de réponse faible.</span> |
|
|
<span class="de-content">Schnelle Anfrageverarbeitung mit niedriger Antwortzeit.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<div class="api-feature-icon"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<div class="api-feature-text"> |
|
|
<h4> |
|
|
<span class="ar-content">أمان عالي</span> |
|
|
<span class="en-content">High Security</span> |
|
|
<span class="fr-content">Haute Sécurité</span> |
|
|
<span class="de-content">Hohe Sicherheit</span> |
|
|
</h4> |
|
|
<p> |
|
|
<span class="ar-content">تشفير متقدم وحماية قوية للبيانات.</span> |
|
|
<span class="en-content">Advanced encryption and strong data protection.</span> |
|
|
<span class="fr-content">Cryptage avancé et protection forte des données.</span> |
|
|
<span class="de-content">Fortschrittliche Verschlüsselung und starker Datenschutz.</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="api-services.html" class="btn btn-primary"> |
|
|
<i class="fas fa-code"></i> |
|
|
<span class="ar-content">استكشف واجهات API</span> |
|
|
<span class="en-content">Explore APIs</span> |
|
|
<span class="fr-content">Explorer les API</span> |
|
|
<span class="de-content">APIs erkunden</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="projects section" id="projects"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">مشاريعنا</span> |
|
|
<span class="en-content">Our Projects</span> |
|
|
<span class="fr-content">Nos Projets</span> |
|
|
<span class="de-content">Unsere Projekte</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="projects-filter" data-aos="fade-up"> |
|
|
<div class="filter-btn active" data-filter="all"> |
|
|
<span class="ar-content">الكل</span> |
|
|
<span class="en-content">All</span> |
|
|
<span class="fr-content">Tous</span> |
|
|
<span class="de-content">Alle</span> |
|
|
</div> |
|
|
<div class="filter-btn" data-filter="ai"> |
|
|
<span class="ar-content">الذكاء الاصطناعي</span> |
|
|
<span class="en-content">AI</span> |
|
|
<span class="fr-content">IA</span> |
|
|
<span class="de-content">KI</span> |
|
|
</div> |
|
|
<div class="filter-btn" data-filter="ml"> |
|
|
<span class="ar-content">تعلم الآلة</span> |
|
|
<span class="en-content">ML</span> |
|
|
<span class="fr-content">ML</span> |
|
|
<span class="de-content">ML</span> |
|
|
</div> |
|
|
<div class="filter-btn" data-filter="robots"> |
|
|
<span class="ar-content">الروبوتات</span> |
|
|
<span class="en-content">Robotics</span> |
|
|
<span class="fr-content">Robotique</span> |
|
|
<span class="de-content">Robotik</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="projects-container" data-aos="fade-up"> |
|
|
<div class="project-item" data-category="ai"> |
|
|
<div class="project-img-container"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=AI+Project" alt="AI Project" class="project-img"> |
|
|
<div class="project-category"> |
|
|
<span class="ar-content">الذكاء الاصطناعي</span> |
|
|
<span class="en-content">AI</span> |
|
|
<span class="fr-content">IA</span> |
|
|
<span class="de-content">KI</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="project-body"> |
|
|
<h3 class="project-title"> |
|
|
<span class="ar-content">نظام المساعد الذكي</span> |
|
|
<span class="en-content">Smart Assistant System</span> |
|
|
<span class="fr-content">Système d'Assistant Intelligent</span> |
|
|
<span class="de-content">Intelligentes Assistenzsystem</span> |
|
|
</h3> |
|
|
<p class="project-desc"> |
|
|
<span class="ar-content">تطوير نظام مساعد ذكي للشركات يعتمد على الذكاء الاصطناعي لتحسين تجربة العملاء وأتمتة المهام.</span> |
|
|
<span class="en-content">Development of an AI-based smart assistant system for companies to enhance customer experience and automate tasks.</span> |
|
|
<span class="fr-content">Développement d'un système d'assistant intelligent basé sur l'IA pour les entreprises afin d'améliorer l'expérience client et d'automatiser les tâches.</span> |
|
|
<span class="de-content">Entwicklung eines KI-basierten intelligenten Assistenzsystems für Unternehmen zur Verbesserung des Kundenerlebnisses und zur Automatisierung von Aufgaben.</span> |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<img src="https://placehold.co/30x30/4facfe/ffffff?text=TC" alt="TechCorp" class="client-img"> |
|
|
<span class="client-name">TechCorp</span> |
|
|
</div> |
|
|
<a href="project-details.html" class="project-link"> |
|
|
<span class="ar-content">التفاصيل</span> |
|
|
<span class="en-content">Details</span> |
|
|
<span class="fr-content">Détails</span> |
|
|
<span class="de-content">Details</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="project-item" data-category="ml"> |
|
|
<div class="project-img-container"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=ML+Project" alt="ML Project" class="project-img"> |
|
|
<div class="project-category"> |
|
|
<span class="ar-content">تعلم الآلة</span> |
|
|
<span class="en-content">ML</span> |
|
|
<span class="fr-content">ML</span> |
|
|
<span class="de-content">ML</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="project-body"> |
|
|
<h3 class="project-title"> |
|
|
<span class="ar-content">نظام التنبؤ بالمبيعات</span> |
|
|
<span class="en-content">Sales Prediction System</span> |
|
|
<span class="fr-content">Système de Prédiction des Ventes</span> |
|
|
<span class="de-content">Verkaufsprognose-System</span> |
|
|
</h3> |
|
|
<p class="project-desc"> |
|
|
<span class="ar-content">تطوير نظام تنبؤ بالمبيعات يعتمد على تقنيات تعلم الآلة لتحليل البيانات التاريخية وتوقع المبيعات المستقبلية.</span> |
|
|
<span class="en-content">Development of a sales prediction system based on machine learning techniques to analyze historical data and forecast future sales.</span> |
|
|
<span class="fr-content">Développement d'un système de prédiction des ventes basé sur des techniques d'apprentissage automatique pour analyser les données historiques et prévoir les ventes futures.</span> |
|
|
<span class="de-content">Entwicklung eines Verkaufsprognose-Systems auf Basis von Machine-Learning-Techniken zur Analyse historischer Daten und Prognose zukünftiger Verkäufe.</span> |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<img src="https://placehold.co/30x30/4facfe/ffffff?text=RC" alt="RetailCo" class="client-img"> |
|
|
<span class="client-name">RetailCo</span> |
|
|
</div> |
|
|
<a href="project-details.html" class="project-link"> |
|
|
<span class="ar-content">التفاصيل</span> |
|
|
<span class="en-content">Details</span> |
|
|
<span class="fr-content">Détails</span> |
|
|
<span class="de-content">Details</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="project-item" data-category="robots"> |
|
|
<div class="project-img-container"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=Robotics+Project" alt="Robotics Project" class="project-img"> |
|
|
<div class="project-category"> |
|
|
<span class="ar-content">الروبوتات</span> |
|
|
<span class="en-content">Robotics</span> |
|
|
<span class="fr-content">Robotique</span> |
|
|
<span class="de-content">Robotik</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="project-body"> |
|
|
<h3 class="project-title"> |
|
|
<span class="ar-content">روبوت المستودعات الذكي</span> |
|
|
<span class="en-content">Smart Warehouse Robot</span> |
|
|
<span class="fr-content">Robot d'Entrepôt Intelligent</span> |
|
|
<span class="de-content">Intelligenter Lagerroboter</span> |
|
|
</h3> |
|
|
<p class="project-desc"> |
|
|
<span class="ar-content">تصميم وتطوير روبوت ذكي للمستودعات قادر على التنقل الذاتي وتنظيم المخزون بكفاءة عالية.</span> |
|
|
<span class="en-content">Design and development of a smart warehouse robot capable of autonomous navigation and efficient inventory organization.</span> |
|
|
<span class="fr-content">Conception et développement d'un robot d'entrepôt intelligent capable de navigation autonome et d'organisation efficace des stocks.</span> |
|
|
<span class="de-content">Design und Entwicklung eines intelligenten Lagerroboters, der zur autonomen Navigation und effizienten Bestandsorganisation fähig ist.</span> |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<img src="https://placehold.co/30x30/4facfe/ffffff?text=LC" alt="LogisticsCo" class="client-img"> |
|
|
<span class="client-name">LogisticsCo</span> |
|
|
</div> |
|
|
<a href="project-details.html" class="project-link"> |
|
|
<span class="ar-content">التفاصيل</span> |
|
|
<span class="en-content">Details</span> |
|
|
<span class="fr-content">Détails</span> |
|
|
<span class="de-content">Details</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="services section" id="services"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">خدماتنا</span> |
|
|
<span class="en-content">Our Services</span> |
|
|
<span class="fr-content">Nos Services</span> |
|
|
<span class="de-content">Unsere Dienstleistungen</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="services-container"> |
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="service-title"> |
|
|
<span class="ar-content">الروبوتات الذكية</span> |
|
|
<span class="en-content">Smart Robots</span> |
|
|
<span class="fr-content">Robots Intelligents</span> |
|
|
<span class="de-content">Intelligente Roboter</span> |
|
|
</h3> |
|
|
<p class="service-text"> |
|
|
<span class="ar-content">تطوير وبرمجة روبوتات ذكية للاستخدامات الصناعية والخدمية، مدعومة بأحدث تقنيات الذكاء الاصطناعي.</span> |
|
|
<span class="en-content">Development and programming of smart robots for industrial and service applications, powered by the latest AI technologies.</span> |
|
|
<span class="fr-content">Développement et programmation de robots intelligents pour des applications industrielles et de service, alimentés par les dernières technologies d'IA.</span> |
|
|
<span class="de-content">Entwicklung und Programmierung intelligenter Roboter für industrielle und dienstleistungsbezogene Anwendungen, unterstützt durch neueste KI-Technologien.</span> |
|
|
</p> |
|
|
<a href="services-details.html" class="btn btn-primary"> |
|
|
<span class="ar-content">المزيد</span> |
|
|
<span class="en-content">Learn More</span> |
|
|
<span class="fr-content">En Savoir Plus</span> |
|
|
<span class="de-content">Mehr Erfahren</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="service-title"> |
|
|
<span class="ar-content">تحليل البيانات</span> |
|
|
<span class="en-content">Data Analysis</span> |
|
|
<span class="fr-content">Analyse de Données</span> |
|
|
<span class="de-content">Datenanalyse</span> |
|
|
</h3> |
|
|
<p class="service-text"> |
|
|
<span class="ar-content">تحليل البيانات الضخمة واستخراج رؤى قيمة لدعم اتخاذ القرارات وتحسين الأداء التشغيلي للمؤسسات.</span> |
|
|
<span class="en-content">Analysis of big data and extraction of valuable insights to support decision-making and improve operational performance of organizations.</span> |
|
|
<span class="fr-content">Analyse de big data et extraction d'informations précieuses pour soutenir la prise de décision et améliorer la performance opérationnelle des organisations.</span> |
|
|
<span class="de-content">Analyse von Big Data und Gewinnung wertvoller Erkenntnisse zur Unterstützung der Entscheidungsfindung und Verbesserung der operativen Leistung von Organisationen.</span> |
|
|
</p> |
|
|
<a href="services-details.html" class="btn btn-primary"> |
|
|
<span class="ar-content">المزيد</span> |
|
|
<span class="en-content">Learn More</span> |
|
|
<span class="fr-content">En Savoir Plus</span> |
|
|
<span class="de-content">Mehr Erfahren</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="service-title"> |
|
|
<span class="ar-content">أنظمة التعلم العميق</span> |
|
|
<span class="en-content">Deep Learning Systems</span> |
|
|
<span class="fr-content">Systèmes d'Apprentissage Profond</span> |
|
|
<span class="de-content">Deep Learning Systeme</span> |
|
|
</h3> |
|
|
<p class="service-text"> |
|
|
<span class="ar-content">تطوير أنظمة تعلم عميق متخصصة لحل مشكلات معقدة في مجالات متنوعة مثل الطب والمال والتصنيع.</span> |
|
|
<span class="en-content">Development of specialized deep learning systems to solve complex problems in diverse fields such as medicine, finance, and manufacturing.</span> |
|
|
<span class="fr-content">Développement de systèmes d'apprentissage profond spécialisés pour résoudre des problèmes complexes dans divers domaines tels que la médecine, la finance et la fabrication.</span> |
|
|
<span class="de-content">Entwicklung spezialisierter Deep-Learning-Systeme zur Lösung komplexer Probleme in verschiedenen Bereichen wie Medizin, Finanzen und Fertigung.</span> |
|
|
</p> |
|
|
<a href="services-details.html" class="btn btn-primary"> |
|
|
<span class="ar-content">المزيد</span> |
|
|
<span class="en-content">Learn More</span> |
|
|
<span class="fr-content">En Savoir Plus</span> |
|
|
<span class="de-content">Mehr Erfahren</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="video-gallery section" id="videos"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">معرض الفيديو</span> |
|
|
<span class="en-content">Video Gallery</span> |
|
|
<span class="fr-content">Galerie Vidéos</span> |
|
|
<span class="de-content">Videogalerie</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="video-grid"> |
|
|
<div class="video-item" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="video-thumbnail"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=AI+Overview" alt="نظرة عامة على الذكاء الاصطناعي" class="video-thumb-img"> |
|
|
<div class="video-play-button"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="video-info"> |
|
|
<h3 class="video-title"> |
|
|
<span class="ar-content">نظرة عامة على تقنيات الذكاء الاصطناعي</span> |
|
|
<span class="en-content">Overview of AI Technologies</span> |
|
|
<span class="fr-content">Aperçu des Technologies d'IA</span> |
|
|
<span class="de-content">Überblick über KI-Technologien</span> |
|
|
</h3> |
|
|
<p class="video-desc"> |
|
|
<span class="ar-content">فيديو تقديمي يشرح أحدث تقنيات الذكاء الاصطناعي وتطبيقاتها في المجالات المختلفة.</span> |
|
|
<span class="en-content">A presentation video explaining the latest AI technologies and their applications in various fields.</span> |
|
|
<span class="fr-content">Une vidéo de présentation expliquant les dernières technologies d'IA et leurs applications dans divers domaines.</span> |
|
|
<span class="de-content">Ein Präsentationsvideo, das die neuesten KI-Technologien und ihre Anwendungen in verschiedenen Bereichen erklärt.</span> |
|
|
</p> |
|
|
<div class="video-meta"> |
|
|
<div class="video-date"> |
|
|
<i class="far fa-calendar-alt"></i> |
|
|
<span>15/03/2025</span> |
|
|
</div> |
|
|
<div class="video-views"> |
|
|
<i class="far fa-eye"></i> |
|
|
<span>2,543</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="video-item" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="video-thumbnail"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=Robot+Demo" alt="عرض توضيحي للروبوت" class="video-thumb-img"> |
|
|
<div class="video-play-button"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="video-info"> |
|
|
<h3 class="video-title"> |
|
|
<span class="ar-content">عرض توضيحي للروبوت الصناعي الذكي</span> |
|
|
<span class="en-content">Smart Industrial Robot Demonstration</span> |
|
|
<span class="fr-content">Démonstration de Robot Industriel Intelligent</span> |
|
|
<span class="de-content">Demonstration eines intelligenten Industrieroboters</span> |
|
|
</h3> |
|
|
<p class="video-desc"> |
|
|
<span class="ar-content">مشاهدة الروبوت الصناعي الذكي وهو يعمل في بيئة إنتاجية حقيقية.</span> |
|
|
<span class="en-content">Watch the smart industrial robot working in a real production environment.</span> |
|
|
<span class="fr-content">Regardez le robot industriel intelligent travailler dans un environnement de production réel.</span> |
|
|
<span class="de-content">Sehen Sie den intelligenten Industrieroboter in einer realen Produktionsumgebung arbeiten.</span> |
|
|
</p> |
|
|
<div class="video-meta"> |
|
|
<div class="video-date"> |
|
|
<i class="far fa-calendar-alt"></i> |
|
|
<span>05/02/2025</span> |
|
|
</div> |
|
|
<div class="video-views"> |
|
|
<i class="far fa-eye"></i> |
|
|
<span>3,217</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center" style="margin-top: 30px;"> |
|
|
<a href="videos.html" class="btn btn-primary"> |
|
|
<span class="ar-content">عرض جميع الفيديوهات</span> |
|
|
<span class="en-content">View All Videos</span> |
|
|
<span class="fr-content">Voir Toutes Les Vidéos</span> |
|
|
<span class="de-content">Alle Videos Anzeigen</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="articles section" id="articles"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">أحدث المقالات</span> |
|
|
<span class="en-content">Latest Articles</span> |
|
|
<span class="fr-content">Derniers Articles</span> |
|
|
<span class="de-content">Neueste Artikel</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="articles-container"> |
|
|
<div class="article-item" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="article-img-container"> |
|
|
<img src="https://placehold.co/300x200/4facfe/ffffff?text=Machine+Learning" alt="تعلم الآلة" class="article-img"> |
|
|
</div> |
|
|
<div class="article-body"> |
|
|
<span class="article-category"> |
|
|
<span class="ar-content">تعلم الآلة</span> |
|
|
<span class="en-content">Machine Learning</span> |
|
|
<span class="fr-content">Apprentissage Automatique</span> |
|
|
<span class="de-content">Maschinelles Lernen</span> |
|
|
</span> |
|
|
<h3 class="article-title"> |
|
|
<span class="ar-content">كيف يغير تعلم الآلة مستقبل الصناعات التقليدية</span> |
|
|
<span class="en-content">How Machine Learning is Changing the Future of Traditional Industries</span> |
|
|
<span class="fr-content">Comment l'Apprentissage Automatique Change l'Avenir des Industries Traditionnelles</span> |
|
|
<span class="de-content">Wie maschinelles Lernen die Zukunft traditioneller Industrien verändert</span> |
|
|
</h3> |
|
|
<p class="article-desc"> |
|
|
<span class="ar-content">استكشاف كيفية استفادة الصناعات التقليدية من تقنيات تعلم الآلة لتحسين الكفاءة وخفض التكاليف.</span> |
|
|
<span class="en-content">Exploring how traditional industries are benefiting from machine learning technologies to improve efficiency and reduce costs.</span> |
|
|
<span class="fr-content">Explorer comment les industries traditionnelles bénéficient des technologies d'apprentissage automatique pour améliorer l'efficacité et réduire les coûts.</span> |
|
|
<span class="de-content">Erforschung, wie traditionelle Industrien von Technologien des maschinellen Lernens profitieren, um die Effizienz zu verbessern und Kosten zu senken.</span> |
|
|
</p> |
|
|
<div class="article-meta"> |
|
|
<div class="article-date"> |
|
|
<i class="far fa-calendar-alt"></i> |
|
|
<span>18/03/2025</span> |
|
|
</div> |
|
|
<a href="article-details.html" class="article-read-more"> |
|
|
<span class="ar-content">اقرأ المزيد</span> |
|
|
<span class="en-content">Read More</span> |
|
|
<span class="fr-content">Lire Plus</span> |
|
|
<span class="de-content">Mehr Lesen</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="article-item" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="article-img-container"> |
|
|
<img src="https://placehold.co/300x200/4facfe/ffffff?text=AI+Ethics" alt="أخلاقيات الذكاء الاصطناعي" class="article-img"> |
|
|
</div> |
|
|
<div class="article-body"> |
|
|
<span class="article-category"> |
|
|
<span class="ar-content">أخلاقيات الذكاء الاصطناعي</span> |
|
|
<span class="en-content">AI Ethics</span> |
|
|
<span class="fr-content">Éthique de l'IA</span> |
|
|
<span class="de-content">KI-Ethik</span> |
|
|
</span> |
|
|
<h3 class="article-title"> |
|
|
<span class="ar-content">التحديات الأخلاقية في تطوير أنظمة الذكاء الاصطناعي</span> |
|
|
<span class="en-content">Ethical Challenges in Developing AI Systems</span> |
|
|
<span class="fr-content">Défis Éthiques dans le Développement des Systèmes d'IA</span> |
|
|
<span class="de-content">Ethische Herausforderungen bei der Entwicklung von KI-Systemen</span> |
|
|
</h3> |
|
|
<p class="article-desc"> |
|
|
<span class="ar-content">مناقشة التحديات الأخلاقية الرئيسية التي تواجه مطوري الذكاء الاصطناعي وكيفية معالجتها.</span> |
|
|
<span class="en-content">Discussing the main ethical challenges facing AI developers and how to address them.</span> |
|
|
<span class="fr-content">Discussion des principaux défis éthiques auxquels sont confrontés les développeurs d'IA et comment les aborder.</span> |
|
|
<span class="de-content">Diskussion der wichtigsten ethischen Herausforderungen für KI-Entwickler und wie man sie angeht.</span> |
|
|
</p> |
|
|
<div class="article-meta"> |
|
|
<div class="article-date"> |
|
|
<i class="far fa-calendar-alt"></i> |
|
|
<span>15/03/2025</span> |
|
|
</div> |
|
|
<a href="article-details.html" class="article-read-more"> |
|
|
<span class="ar-content">اقرأ المزيد</span> |
|
|
<span class="en-content">Read More</span> |
|
|
<span class="fr-content">Lire Plus</span> |
|
|
<span class="de-content">Mehr Lesen</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center" style="margin-top: 30px;"> |
|
|
<a href="articles.html" class="btn btn-primary"> |
|
|
<span class="ar-content">عرض جميع المقالات</span> |
|
|
<span class="en-content">View All Articles</span> |
|
|
<span class="fr-content">Voir Tous Les Articles</span> |
|
|
<span class="de-content">Alle Artikel Anzeigen</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="companies"> |
|
|
<div class="container"> |
|
|
<div class="companies-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">شركاؤنا</span> |
|
|
<span class="en-content">Our Partners</span> |
|
|
<span class="fr-content">Nos Partenaires</span> |
|
|
<span class="de-content">Unsere Partner</span> |
|
|
</h2> |
|
|
<p> |
|
|
<span class="ar-content">نفتخر بالتعاون مع مجموعة من الشركات الرائدة في مختلف المجالات</span> |
|
|
<span class="en-content">We are proud to collaborate with a group of leading companies in various fields</span> |
|
|
<span class="fr-content">Nous sommes fiers de collaborer avec un groupe d'entreprises leaders dans divers domaines</span> |
|
|
<span class="de-content">Wir sind stolz darauf, mit einer Gruppe führender Unternehmen in verschiedenen Bereichen zusammenzuarbeiten</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="companies-slider" data-aos="fade-up"> |
|
|
<div class="companies-track"> |
|
|
|
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner1" alt="Partner 1"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner2" alt="Partner 2"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner3" alt="Partner 3"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner4" alt="Partner 4"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner5" alt="Partner 5"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner6" alt="Partner 6"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner7" alt="Partner 7"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner8" alt="Partner 8"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner9" alt="Partner 9"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner10" alt="Partner 10"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner1" alt="Partner 1"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner2" alt="Partner 2"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner3" alt="Partner 3"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner4" alt="Partner 4"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner5" alt="Partner 5"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner6" alt="Partner 6"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner7" alt="Partner 7"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner8" alt="Partner 8"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner9" alt="Partner 9"> |
|
|
</div> |
|
|
<div class="company-logo"> |
|
|
<img src="https://placehold.co/150x70/4facfe/ffffff?text=Partner10" alt="Partner 10"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="photo-gallery section" id="gallery"> |
|
|
<div class="container"> |
|
|
<div class="section-title" data-aos="fade-up"> |
|
|
<h2> |
|
|
<span class="ar-content">معرض الصور</span> |
|
|
<span class="en-content">Photo Gallery</span> |
|
|
<span class="fr-content">Galerie Photos</span> |
|
|
<span class="de-content">Fotogalerie</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="gallery-container"> |
|
|
<div class="gallery-item" data-aos="fade-up" data-aos-delay="100"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=AI+Conference" alt="مؤتمر الذكاء الاصطناعي" class="gallery-img"> |
|
|
<div class="gallery-overlay"> |
|
|
<div> |
|
|
<h3 class="gallery-title"> |
|
|
<span class="ar-content">مؤتمر الذكاء الاصطناعي 2025</span> |
|
|
<span class="en-content">AI Conference 2025</span> |
|
|
<span class="fr-content">Conférence IA 2025</span> |
|
|
<span class="de-content">KI-Konferenz 2025</span> |
|
|
</h3> |
|
|
<p class="gallery-category"> |
|
|
<span class="ar-content">الفعاليات</span> |
|
|
<span class="en-content">Events</span> |
|
|
<span class="fr-content">Événements</span> |
|
|
<span class="de-content">Veranstaltungen</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-icon"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-item" data-aos="fade-up" data-aos-delay="200"> |
|
|
<img src="https://placehold.co/400x600/4facfe/ffffff?text=Team+Workshop" alt="ورشة عمل الفريق" class="gallery-img"> |
|
|
<div class="gallery-overlay"> |
|
|
<div> |
|
|
<h3 class="gallery-title"> |
|
|
<span class="ar-content">ورشة عمل تطوير المهارات</span> |
|
|
<span class="en-content">Skills Development Workshop</span> |
|
|
<span class="fr-content">Atelier de Développement des Compétences</span> |
|
|
<span class="de-content">Workshop zur Kompetenzentwicklung</span> |
|
|
</h3> |
|
|
<p class="gallery-category"> |
|
|
<span class="ar-content">التدريب</span> |
|
|
<span class="en-content">Training</span> |
|
|
<span class="fr-content">Formation</span> |
|
|
<span class="de-content">Ausbildung</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-icon"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-item" data-aos="fade-up" data-aos-delay="300"> |
|
|
<img src="https://placehold.co/400x400/4facfe/ffffff?text=Robot+Lab" alt="مختبر الروبوتات" class="gallery-img"> |
|
|
<div class="gallery-overlay"> |
|
|
<div> |
|
|
<h3 class="gallery-title"> |
|
|
<span class="ar-content">مختبر الروبوتات المتقدم</span> |
|
|
<span class="en-content">Advanced Robotics Lab</span> |
|
|
<span class="fr-content">Laboratoire de Robotique Avancée</span> |
|
|
<span class="de-content">Labor für fortschrittliche Robotik</span> |
|
|
</h3> |
|
|
<p class="gallery-category"> |
|
|
<span class="ar-content">المختبرات</span> |
|
|
<span class="en-content">Labs</span> |
|
|
<span class="fr-content">Laboratoires</span> |
|
|
<span class="de-content">Labore</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-icon"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-item" data-aos="fade-up" data-aos-delay="400"> |
|
|
<img src="https://placehold.co/600x400/4facfe/ffffff?text=Tech+Exhibition" alt="معرض التكنولوجيا" class="gallery-img"> |
|
|
<div class="gallery-overlay"> |
|
|
<div> |
|
|
<h3 class="gallery-title"> |
|
|
<span class="ar-content">معرض التكنولوجيا الدولي</span> |
|
|
<span class="en-content">International Technology Exhibition</span> |
|
|
<span class="fr-content">Exposition Internationale de Technologie</span> |
|
|
<span class="de-content">Internationale Technologieausstellung</span> |
|
|
</h3> |
|
|
<p class="gallery-category"> |
|
|
<span class="ar-content">المعارض</span> |
|
|
<span class="en-content">Exhibitions</span> |
|
|
<span class="fr-content">Expositions</span> |
|
|
<span class="de-content">Ausstellungen</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gallery-icon"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center" style="margin-top: 30px;"> |
|
|
<a href="photos.html" class="btn btn-primary"> |
|
|
<span class="ar-content">عرض جميع الصور</span> |
|
|
<span class="en-content">View All Photos</span> |
|
|
<span class="fr-content">Voir Toutes Les Photos</span> |
|
|
<span class="de-content">Alle Fotos Anzeigen</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="chatbot-widget"> |
|
|
<div class="chatbot-toggle"> |
|
|
<i class="fas fa-comments"></i> |
|
|
</div> |
|
|
<div class="chatbot-container"> |
|
|
<div class="chatbot-header"> |
|
|
<div class="chatbot-avatar"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="chatbot-title"> |
|
|
<h4> |
|
|
<span class="ar-content">فاست برو بوت</span> |
|
|
<span class="en-content">FastPro Bot</span> |
|
|
<span class="fr-content">Bot FastPro</span> |
|
|
<span class="de-content">FastPro Bot</span> |
|
|
</h4> |
|
|
<span> |
|
|
<span class="ar-content">متصل الآن</span> |
|
|
<span class="en-content">Online now</span> |
|
|
<span class="fr-content">En ligne maintenant</span> |
|
|
<span class="de-content">Jetzt online</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chatbot-messages"> |
|
|
<div class="message message-bot"> |
|
|
<div class="message-content"> |
|
|
<span class="ar-content">مرحباً! أنا فاست برو بوت، المساعد الذكي الخاص بك. كيف يمكنني مساعدتك اليوم؟</span> |
|
|
<span class="en-content">Hello! I'm FastPro Bot, your smart assistant. How can I help you today?</span> |
|
|
<span class="fr-content">Bonjour! Je suis Bot FastPro, votre assistant intelligent. Comment puis-je vous aider aujourd'hui?</span> |
|
|
<span class="de-content">Hallo! Ich bin FastPro Bot, Ihr intelligenter Assistent. Wie kann ich Ihnen heute helfen?</span> |
|
|
</div> |
|
|
<div class="message-time">10:30</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chatbot-footer"> |
|
|
<input type="text" class="chatbot-input" placeholder="اكتب رسالتك هنا..."> |
|
|
<button class="chatbot-send"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
<div class="container"> |
|
|
<div class="footer-top"> |
|
|
<div class="footer-widget footer-about"> |
|
|
<h3 class="footer-title"> |
|
|
<span class="ar-content">عن فاست برو</span> |
|
|
<span class="en-content">About FastPro</span> |
|
|
<span class="fr-content">À Propos de FastPro</span> |
|
|
<span class="de-content">Über FastPro</span> |
|
|
</h3> |
|
|
<p> |
|
|
<span class="ar-content">شركة رائدة في مجال تطوير حلول الذكاء الاصطناعي المبتكرة، نسعى لتمكين المؤسسات من استثمار قوة التكنولوجيا الحديثة.</span> |
|
|
<span class="en-content">A leading company in developing innovative AI solutions, seeking to enable organizations to harness the power of modern technology.</span> |
|
|
<span class="fr-content">Une entreprise leader dans le développement de solutions d'IA innovantes, cherchant à permettre aux organisations d'exploiter la puissance de la technologie moderne.</span> |
|
|
<span class="de-content">Ein führendes Unternehmen bei der Entwicklung innovativer KI-Lösungen, das Organisationen in die Lage versetzen will, die Kraft moderner Technologie zu nutzen.</span> |
|
|
</p> |
|
|
<div class="social-links"> |
|
|
<a href="#" class="social-link"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="social-link"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="social-link"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="social-link"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-widget footer-links"> |
|
|
<h3 class="footer-title"> |
|
|
<span class="ar-content">روابط سريعة</span> |
|
|
<span class="en-content">Quick Links</span> |
|
|
<span class="fr-content">Liens Rapides</span> |
|
|
<span class="de-content">Schnelle Links</span> |
|
|
</h3> |
|
|
<ul> |
|
|
<li><a href="index.html"> |
|
|
<span class="ar-content">الرئيسية</span> |
|
|
<span class="en-content">Home</span> |
|
|
<span class="fr-content">Accueil</span> |
|
|
<span class="de-content">Startseite</span> |
|
|
</a></li> |
|
|
<li><a href="about.html"> |
|
|
<span class="ar-content">من نحن</span> |
|
|
<span class="en-content">About</span> |
|
|
<span class="fr-content">À Propos</span> |
|
|
<span class="de-content">Über Uns</span> |
|
|
</a></li> |
|
|
<li><a href="services.html"> |
|
|
<span class="ar-content">خدماتنا</span> |
|
|
<span class="en-content">Services</span> |
|
|
<span class="fr-content">Services</span> |
|
|
<span class="de-content">Dienstleistungen</span> |
|
|
</a></li> |
|
|
<li><a href="projects.html"> |
|
|
<span class="ar-content">مشاريعنا</span> |
|
|
<span class="en-content">Projects</span> |
|
|
<span class="fr-content">Projets</span> |
|
|
<span class="de-content">Projekte</span> |
|
|
</a></li> |
|
|
<li><a href="contact.html"> |
|
|
<span class="ar-content">تواصل معنا</span> |
|
|
<span class="en-content">Contact</span> |
|
|
<span class="fr-content">Contact</span> |
|
|
<span class="de-content">Kontakt</span> |
|
|
</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-widget footer-links"> |
|
|
<h3 class="footer-title"> |
|
|
<span class="ar-content">المعارض</span> |
|
|
<span class="en-content">Galleries</span> |
|
|
<span class="fr-content">Galeries</span> |
|
|
<span class="de-content">Galerien</span> |
|
|
</h3> |
|
|
<ul> |
|
|
<li><a href="photos.html"> |
|
|
<span class="ar-content">معرض الصور</span> |
|
|
<span class="en-content">Photo Gallery</span> |
|
|
<span class="fr-content">Galerie Photos</span> |
|
|
<span class="de-content">Fotogalerie</span> |
|
|
</a></li> |
|
|
<li><a href="videos.html"> |
|
|
<span class="ar-content">معرض الفيديو</span> |
|
|
<span class="en-content">Video Gallery</span> |
|
|
<span class="fr-content">Galerie Vidéos</span> |
|
|
<span class="de-content">Videogalerie</span> |
|
|
</a></li> |
|
|
<li><a href="news.html"> |
|
|
<span class="ar-content">الأخبار</span> |
|
|
<span class="en-content">News</span> |
|
|
<span class="fr-content">Actualités</span> |
|
|
<span class="de-content">Nachrichten</span> |
|
|
</a></li> |
|
|
<li><a href="articles.html"> |
|
|
<span class="ar-content">المقالات</span> |
|
|
<span class="en-content">Articles</span> |
|
|
<span class="fr-content">Articles</span> |
|
|
<span class="de-content">Artikel</span> |
|
|
</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-widget footer-subscribe"> |
|
|
<h3 class="footer-title"> |
|
|
<span class="ar-content">النشرة الإخبارية</span> |
|
|
<span class="en-content">Newsletter</span> |
|
|
<span class="fr-content">Bulletin d'Information</span> |
|
|
<span class="de-content">Newsletter</span> |
|
|
</h3> |
|
|
<p> |
|
|
<span class="ar-content">اشترك في نشرتنا الإخبارية للحصول على آخر التحديثات.</span> |
|
|
<span class="en-content">Subscribe to our newsletter to get the latest updates.</span> |
|
|
<span class="fr-content">Abonnez-vous à notre newsletter pour recevoir les dernières mises à jour.</span> |
|
|
<span class="de-content">Abonnieren Sie unseren Newsletter, um die neuesten Updates zu erhalten.</span> |
|
|
</p> |
|
|
<form> |
|
|
<input type="email" placeholder="Email" required> |
|
|
<button type="submit"><i class="fas fa-paper-plane"></i></button> |
|
|
</form> |
|
|
<div class="footer-contact"> |
|
|
<p><i class="fas fa-phone-alt"></i> +20 123 456 7890</p> |
|
|
<p><i class="fas fa-envelope"></i> info@fastpro.ai</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-bottom"> |
|
|
<p> |
|
|
<span class="ar-content">© 2025 فاست برو. جميع الحقوق محفوظة. تصميم وتطوير <a href="#">فريق فاست برو</a></span> |
|
|
<span class="en-content">© 2025 FastPro. All rights reserved. Designed & Developed by <a href="#">FastPro Team</a></span> |
|
|
<span class="fr-content">© 2025 FastPro. Tous droits réservés. Conçu et développé par <a href="#">L'équipe FastPro</a></span> |
|
|
<span class="de-content">© 2025 FastPro. Alle Rechte vorbehalten. Entworfen & Entwickelt von <a href="#">FastPro Team</a></span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
once: true, |
|
|
offset: 100 |
|
|
}); |
|
|
|
|
|
|
|
|
const animatedBg = document.getElementById('animated-bg'); |
|
|
const symbols = { |
|
|
egyptian: ['☥', '𓂀', '𓇋', '𓇌', '𓆣', '𓋹', '𓀀', '𓅓', '𓊖', '𓊗'], |
|
|
tech: ['⚙️', '🔌', '💻', '🖥️', '📱', '🤖', '📊', '📈', '🔬', '🔍', '⚡', '🧠'] |
|
|
}; |
|
|
|
|
|
for (let i = 0; i < 40; i++) { |
|
|
const symbolType = Math.random() > 0.5 ? 'egyptian' : 'tech'; |
|
|
const symbol = document.createElement('div'); |
|
|
symbol.className = `bg-symbol ${symbolType}`; |
|
|
symbol.textContent = symbols[symbolType][Math.floor(Math.random() * symbols[symbolType].length)]; |
|
|
symbol.style.left = `${Math.random() * 100}vw`; |
|
|
symbol.style.top = `${Math.random() * 100}vh`; |
|
|
symbol.style.animationDuration = `${Math.random() * 15 + 15}s`; |
|
|
symbol.style.animationDelay = `${Math.random() * 5}s`; |
|
|
animatedBg.appendChild(symbol); |
|
|
} |
|
|
|
|
|
|
|
|
const header = document.querySelector('.header'); |
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.scrollY > 100) { |
|
|
header.classList.add('scrolled'); |
|
|
} else { |
|
|
header.classList.remove('scrolled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileToggle = document.querySelector('.mobile-toggle'); |
|
|
const mobileMenu = document.querySelector('.mobile-menu'); |
|
|
const overlay = document.querySelector('.overlay'); |
|
|
const mobileClose = document.querySelector('.mobile-menu-close'); |
|
|
|
|
|
mobileToggle.addEventListener('click', function() { |
|
|
mobileMenu.classList.add('active'); |
|
|
overlay.classList.add('active'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
const closeMobileMenu = function() { |
|
|
mobileMenu.classList.remove('active'); |
|
|
overlay.classList.remove('active'); |
|
|
document.body.style.overflow = ''; |
|
|
}; |
|
|
|
|
|
mobileClose.addEventListener('click', closeMobileMenu); |
|
|
overlay.addEventListener('click', closeMobileMenu); |
|
|
|
|
|
|
|
|
const languageCurrent = document.querySelector('.language-current'); |
|
|
const languageOptions = document.querySelector('.language-options'); |
|
|
const currentFlag = document.getElementById('current-flag'); |
|
|
const currentLanguage = document.getElementById('current-language'); |
|
|
const searchInput = document.getElementById('search-input'); |
|
|
const chatbotInput = document.querySelector('.chatbot-input'); |
|
|
|
|
|
languageCurrent.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
languageOptions.style.display = languageOptions.style.display === 'block' ? 'none' : 'block'; |
|
|
}); |
|
|
|
|
|
document.addEventListener('click', function() { |
|
|
languageOptions.style.display = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
const languageOpts = document.querySelectorAll('.language-option'); |
|
|
const mobileLanguageOpts = document.querySelectorAll('.mobile-language-option'); |
|
|
|
|
|
function setLanguage(lang) { |
|
|
const selectedLangOpt = document.querySelector(`.language-option[data-lang="${lang}"]`); |
|
|
if (!selectedLangOpt) return; |
|
|
|
|
|
const flag = selectedLangOpt.querySelector('.language-flag').src; |
|
|
const text = selectedLangOpt.querySelector('span').textContent; |
|
|
|
|
|
currentFlag.src = flag; |
|
|
currentLanguage.textContent = text; |
|
|
|
|
|
document.documentElement.setAttribute('lang', lang); |
|
|
document.documentElement.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr'); |
|
|
|
|
|
|
|
|
if (lang === 'ar') { |
|
|
searchInput.placeholder = 'ابحث هنا...'; |
|
|
chatbotInput.placeholder = 'اكتب رسالتك هنا...'; |
|
|
} else if (lang === 'en') { |
|
|
searchInput.placeholder = 'Search here...'; |
|
|
chatbotInput.placeholder = 'Type your message here...'; |
|
|
} else if (lang === 'fr') { |
|
|
searchInput.placeholder = 'Rechercher ici...'; |
|
|
chatbotInput.placeholder = 'Tapez votre message ici...'; |
|
|
} else if (lang === 'de') { |
|
|
searchInput.placeholder = 'Hier suchen...'; |
|
|
chatbotInput.placeholder = 'Geben Sie Ihre Nachricht hier ein...'; |
|
|
} |
|
|
|
|
|
|
|
|
localStorage.setItem('selectedLanguage', lang); |
|
|
} |
|
|
|
|
|
languageOpts.forEach(opt => { |
|
|
opt.addEventListener('click', function() { |
|
|
const lang = this.getAttribute('data-lang'); |
|
|
setLanguage(lang); |
|
|
}); |
|
|
}); |
|
|
|
|
|
mobileLanguageOpts.forEach(opt => { |
|
|
opt.addEventListener('click', function() { |
|
|
const lang = this.getAttribute('data-lang'); |
|
|
setLanguage(lang); |
|
|
closeMobileMenu(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const savedLang = localStorage.getItem('selectedLanguage') || 'ar'; |
|
|
setLanguage(savedLang); |
|
|
|
|
|
|
|
|
const themeToggle = document.querySelector('.theme-toggle'); |
|
|
|
|
|
themeToggle.addEventListener('click', function() { |
|
|
if (document.body.getAttribute('data-theme') === 'dark') { |
|
|
document.body.removeAttribute('data-theme'); |
|
|
localStorage.setItem('theme', 'light'); |
|
|
} else { |
|
|
document.body.setAttribute('data-theme', 'dark'); |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const savedTheme = localStorage.getItem('theme'); |
|
|
if (savedTheme === 'dark') { |
|
|
document.body.setAttribute('data-theme', 'dark'); |
|
|
} |
|
|
|
|
|
|
|
|
const searchToggle = document.querySelector('.search-toggle'); |
|
|
const searchModal = document.querySelector('.search-modal'); |
|
|
const searchClose = document.querySelector('.search-close'); |
|
|
|
|
|
searchToggle.addEventListener('click', function() { |
|
|
searchModal.classList.add('active'); |
|
|
setTimeout(() => { |
|
|
searchInput.focus(); |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
searchClose.addEventListener('click', function() { |
|
|
searchModal.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const logoTitles = { |
|
|
ar: ['فاست برو', 'الذكاء الاصطناعي', 'تقنيات المستقبل', 'ابتكار وتميز', 'أنظمة ذكية'], |
|
|
en: ['FastPro', 'Artificial Intelligence', 'Future Tech', 'Innovation', 'Smart Systems'], |
|
|
fr: ['FastPro', 'Intelligence Artificielle', 'Tech du Futur', 'Innovation', 'Systèmes Intelligents'], |
|
|
de: ['FastPro', 'Künstliche Intelligenz', 'Zukunftstechnologien', 'Innovation', 'Intelligente Systeme'] |
|
|
}; |
|
|
|
|
|
function updateLogoText() { |
|
|
const logoText = document.getElementById('logo-text'); |
|
|
if (!logoText) return; |
|
|
|
|
|
|
|
|
logoText.classList.remove('logo-text-animated'); |
|
|
|
|
|
const lang = document.documentElement.getAttribute('lang') || 'ar'; |
|
|
const titles = logoTitles[lang]; |
|
|
const randomIndex = Math.floor(Math.random() * titles.length); |
|
|
|
|
|
|
|
|
void logoText.offsetWidth; |
|
|
|
|
|
logoText.textContent = titles[randomIndex]; |
|
|
logoText.classList.add('logo-text-animated'); |
|
|
} |
|
|
|
|
|
|
|
|
updateLogoText(); |
|
|
|
|
|
|
|
|
setInterval(updateLogoText, 30000); |
|
|
|
|
|
|
|
|
const typewriterTexts = { |
|
|
ar: ['من هنا نبدأ نطور بلدنا', 'نبني مستقبل أفضل معاً', 'نحو غدٍ أكثر ذكاءً', 'تقنيات مبتكرة لمصر الحديثة', 'رؤية جديدة للتكنولوجيا'], |
|
|
en: ['From here we start developing our country', 'Building a better future together', 'Towards a smarter tomorrow', 'Innovative technologies for modern Egypt', 'A new vision for technology'], |
|
|
fr: ['D\'ici nous commençons à développer notre pays', 'Construire un avenir meilleur ensemble', 'Vers un lendemain plus intelligent', 'Technologies innovantes pour l\'Égypte moderne', 'Une nouvelle vision de la technologie'], |
|
|
de: ['Von hier aus beginnen wir, unser Land zu entwickeln', 'Gemeinsam eine bessere Zukunft aufbauen', 'Auf dem Weg zu einem intelligenteren Morgen', 'Innovative Technologien für das moderne Ägypten', 'Eine neue Vision für Technologie'] |
|
|
}; |
|
|
|
|
|
let currentTextIndex = 0; |
|
|
let charIndex = 0; |
|
|
let isDeleting = false; |
|
|
let typingSpeed = 100; |
|
|
let pauseDuration = 2000; |
|
|
|
|
|
function typeWriter() { |
|
|
const typewriterText = document.getElementById('typewriter-text'); |
|
|
if (!typewriterText) return; |
|
|
|
|
|
const lang = document.documentElement.getAttribute('lang') || 'ar'; |
|
|
const texts = typewriterTexts[lang]; |
|
|
|
|
|
const currentText = texts[currentTextIndex]; |
|
|
|
|
|
if (isDeleting) { |
|
|
|
|
|
typewriterText.textContent = currentText.substring(0, charIndex - 1); |
|
|
charIndex--; |
|
|
typingSpeed = 50; |
|
|
} else { |
|
|
|
|
|
typewriterText.textContent = currentText.substring(0, charIndex + 1); |
|
|
charIndex++; |
|
|
typingSpeed = 100; |
|
|
} |
|
|
|
|
|
|
|
|
if (!isDeleting && charIndex === currentText.length) { |
|
|
isDeleting = true; |
|
|
typingSpeed = pauseDuration; |
|
|
} |
|
|
|
|
|
|
|
|
if (isDeleting && charIndex === 0) { |
|
|
isDeleting = false; |
|
|
currentTextIndex = (currentTextIndex + 1) % texts.length; |
|
|
} |
|
|
|
|
|
setTimeout(typeWriter, typingSpeed); |
|
|
} |
|
|
|
|
|
|
|
|
typeWriter(); |
|
|
|
|
|
|
|
|
const prefTabs = document.querySelectorAll('.pref-tab'); |
|
|
const prefContents = document.querySelectorAll('.pref-content'); |
|
|
|
|
|
prefTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
const target = tab.getAttribute('data-tab'); |
|
|
|
|
|
|
|
|
prefTabs.forEach(t => t.classList.remove('active')); |
|
|
prefContents.forEach(c => c.classList.remove('active')); |
|
|
|
|
|
|
|
|
tab.classList.add('active'); |
|
|
document.getElementById(`${target}-content`).classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const filterBtns = document.querySelectorAll('.filter-btn'); |
|
|
const projectItems = document.querySelectorAll('.project-item'); |
|
|
|
|
|
filterBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const filter = btn.getAttribute('data-filter'); |
|
|
|
|
|
|
|
|
filterBtns.forEach(b => b.classList.remove('active')); |
|
|
|
|
|
|
|
|
btn.classList.add('active'); |
|
|
|
|
|
|
|
|
projectItems.forEach(item => { |
|
|
if (filter === 'all' || item.getAttribute('data-category') === filter) { |
|
|
item.style.display = 'block'; |
|
|
} else { |
|
|
item.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const chatbotToggle = document.querySelector('.chatbot-toggle'); |
|
|
const chatbotContainer = document.querySelector('.chatbot-container'); |
|
|
const chatbotMessages = document.querySelector('.chatbot-messages'); |
|
|
const chatbotSend = document.querySelector('.chatbot-send'); |
|
|
|
|
|
chatbotToggle.addEventListener('click', () => { |
|
|
chatbotContainer.classList.toggle('active'); |
|
|
chatbotToggle.classList.toggle('active'); |
|
|
if (chatbotContainer.classList.contains('active')) { |
|
|
chatbotInput.focus(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function addMessage(text, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message message-${isUser ? 'user' : 'bot'}`; |
|
|
|
|
|
const contentDiv = document.createElement('div'); |
|
|
contentDiv.className = 'message-content'; |
|
|
|
|
|
const lang = document.documentElement.getAttribute('lang') || 'ar'; |
|
|
|
|
|
if (isUser) { |
|
|
contentDiv.textContent = text; |
|
|
} else { |
|
|
|
|
|
const arSpan = document.createElement('span'); |
|
|
arSpan.className = 'ar-content'; |
|
|
arSpan.textContent = text.ar || text; |
|
|
|
|
|
const enSpan = document.createElement('span'); |
|
|
enSpan.className = 'en-content'; |
|
|
enSpan.textContent = text.en || text; |
|
|
|
|
|
const frSpan = document.createElement('span'); |
|
|
frSpan.className = 'fr-content'; |
|
|
frSpan.textContent = text.fr || text; |
|
|
|
|
|
const deSpan = document.createElement('span'); |
|
|
deSpan.className = 'de-content'; |
|
|
deSpan.textContent = text.de || text; |
|
|
|
|
|
contentDiv.appendChild(arSpan); |
|
|
contentDiv.appendChild(enSpan); |
|
|
contentDiv.appendChild(frSpan); |
|
|
contentDiv.appendChild(deSpan); |
|
|
} |
|
|
|
|
|
const timeDiv = document.createElement('div'); |
|
|
timeDiv.className = 'message-time'; |
|
|
|
|
|
const now = new Date(); |
|
|
timeDiv.textContent = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`; |
|
|
|
|
|
messageDiv.appendChild(contentDiv); |
|
|
messageDiv.appendChild(timeDiv); |
|
|
|
|
|
chatbotMessages.appendChild(messageDiv); |
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
function botResponse(userMessage) { |
|
|
|
|
|
setTimeout(() => { |
|
|
if (userMessage.includes('خدمات') || userMessage.includes('services') || userMessage.includes('servic')) { |
|
|
addMessage({ |
|
|
ar: 'نقدم مجموعة متنوعة من خدمات الذكاء الاصطناعي والروبوتات. هل تريد معرفة المزيد عن خدمة معينة؟', |
|
|
en: 'We provide a variety of AI and robotics services. Would you like to know more about a specific service?', |
|
|
fr: 'Nous proposons une variété de services d\'IA et de robotique. Souhaitez-vous en savoir plus sur un service spécifique?', |
|
|
de: 'Wir bieten eine Vielzahl von KI- und Robotikdiensten an. Möchten Sie mehr über einen bestimmten Service erfahren?' |
|
|
}); |
|
|
} else if (userMessage.includes('سعر') || userMessage.includes('price') || userMessage.includes('cost')) { |
|
|
addMessage({ |
|
|
ar: 'أسعارنا تختلف حسب احتياجات المشروع. يمكنك التواصل معنا للحصول على عرض سعر مخصص.', |
|
|
en: 'Our prices vary based on project requirements. You can contact us for a customized quote.', |
|
|
fr: 'Nos prix varient en fonction des exigences du projet. Vous pouvez nous contacter pour un devis personnalisé.', |
|
|
de: 'Unsere Preise variieren je nach Projektanforderungen. Sie können uns für ein individuelles Angebot kontaktieren.' |
|
|
}); |
|
|
} else { |
|
|
addMessage({ |
|
|
ar: 'شكرًا لتواصلك. هل يمكنني مساعدتك في شيء آخر؟', |
|
|
en: 'Thank you for your message. Can I help you with anything else?', |
|
|
fr: 'Merci pour votre message. Puis-je vous aider avec autre chose?', |
|
|
de: 'Vielen Dank für Ihre Nachricht. Kann ich Ihnen mit etwas anderem helfen?' |
|
|
}); |
|
|
} |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
chatbotSend.addEventListener('click', () => { |
|
|
const message = chatbotInput.value.trim(); |
|
|
if (message) { |
|
|
addMessage(message, true); |
|
|
chatbotInput.value = ''; |
|
|
botResponse(message); |
|
|
} |
|
|
}); |
|
|
|
|
|
chatbotInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
const message = chatbotInput.value.trim(); |
|
|
if (message) { |
|
|
addMessage(message, true); |
|
|
chatbotInput.value = ''; |
|
|
botResponse(message); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
