Hugging Face's logo

Spaces:
fastpro
/
home-2
Running

App Files Community
home-2 / index.html
joermd's picture
joermd
Create index.html
0c71b7d verified
raw
history blame contribute delete
136 kB
 <!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>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Roboto:wght@300;400;500;700&family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- Particles.js for Interactive Background -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- Typed.js for Text Animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<!-- AOS Library for Scroll Animations -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<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);
}
/* Dark Mode Variables */
[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);
}
/* SPEEDY UNIVERSE Theme */
[data-theme="cosmos"] {
--primary-color: #7b2cbf;
--primary-gradient: linear-gradient(to right, #7b2cbf 0%, #3a0ca3 100%);
--secondary-color: #f72585;
--secondary-gradient: linear-gradient(to right, #f72585 0%, #7209b7 100%);
--accent-color: #4cc9f0;
--accent-gradient: linear-gradient(to right, #4cc9f0 0%, #4361ee 100%);
--dark-color: #e0fbfc;
--light-color: #10002b;
--text-color: #e0aaff;
--bg-color: #240046;
--card-bg: #3c096c;
--footer-bg: #10002b;
--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
--card-shadow: 0 5px 15px rgba(121, 41, 191, 0.3);
--button-shadow: 0 10px 20px rgba(123, 44, 191, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s;
}
body {
font-family: 'Cairo', 'Tajawal', 'Roboto', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
overflow-x: hidden;
}
/* Language Specific Styles */
[lang="ar"] {
font-family: 'Cairo', 'Tajawal', sans-serif;
direction: rtl;
}
[lang="en"] {
font-family: 'Roboto', sans-serif;
direction: ltr;
}
[lang="fr"] {
font-family: 'Roboto', sans-serif;
direction: ltr;
}
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);
}
[data-theme="dark"] a, [data-theme="cosmos"] a {
color: white;
}
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;
}
}
/* Particles Background */
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
pointer-events: none;
}
[data-theme="cosmos"] #particles-js {
opacity: 0.8;
}
/* Star Background for Cosmos Theme */
.stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
overflow: hidden;
display: none;
}
[data-theme="cosmos"] .stars-container {
display: block;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle 5s infinite;
}
@keyframes twinkle {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
.shooting-star {
position: absolute;
width: 4px;
height: 4px;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
transform: rotate(45deg);
animation: shoot 8s linear infinite;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3);
}
@keyframes shoot {
0% {
transform: translateX(-100px) translateY(-100px) rotate(45deg);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg);
opacity: 0;
}
}
/* Header Styles */
.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);
}
[data-theme="cosmos"] .header {
background-color: rgba(36, 0, 70, 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);
}
[data-theme="cosmos"] .header.scrolled {
background-color: rgba(36, 0, 70, 0.98);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo-image {
width: 40px;
height: 40px;
margin-left: 10px;
border-radius: 8px;
object-fit: cover;
}
.logo-text {
font-size: 1.8rem;
font-weight: 700;
color: var(--dark-color);
}
[data-theme="dark"] .logo-text, [data-theme="cosmos"] .logo-text {
color: var(--dark-color);
}
/* Logo Animation Container */
.logo-animated {
display: inline-block;
min-width: 150px;
font-weight: 700;
}
/* Language Selector */
.language-selector {
position: relative;
margin-left: 20px;
}
.current-lang {
display: flex;
align-items: center;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
background-color: var(--card-bg);
color: var(--dark-color);
transition: var(--transition);
}
[data-theme="dark"] .current-lang, [data-theme="cosmos"] .current-lang {
color: white;
}
.current-lang:hover {
background-color: var(--primary-color);
color: white;
}
.current-lang img {
width: 20px;
height: 20px;
margin-left: 5px;
border-radius: 50%;
}
.lang-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 150px;
background-color: var(--bg-color);
border-radius: 5px;
box-shadow: var(--card-shadow);
overflow: hidden;
display: none;
z-index: 10;
}
.lang-option {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
transition: var(--transition);
}
.lang-option:hover {
background-color: var(--card-bg);
}
.lang-option img {
width: 20px;
height: 20px;
margin-left: 10px;
border-radius: 50%;
}
.nav-menu {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
list-style: none;
}
.nav-item {
margin: 0 15px;
position: relative;
}
.nav-link {
color: var(--dark-color);
font-weight: 600;
position: relative;
padding: 5px 0;
display: flex;
align-items: center;
}
[data-theme="dark"] .nav-link, [data-theme="cosmos"] .nav-link {
color: white;
}
.nav-link img {
width: 20px;
height: 20px;
margin-left: 5px;
border-radius: 50%;
}
.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);
}
[data-theme="dark"] .nav-link:hover, [data-theme="cosmos"] .nav-link:hover {
color: var(--primary-color);
}
/* Theme Toggles */
.theme-toggles {
display: flex;
align-items: center;
gap: 10px;
}
.theme-toggle {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
color: var(--dark-color);
transition: var(--transition);
}
[data-theme="dark"] .theme-toggle, [data-theme="cosmos"] .theme-toggle {
color: white;
}
.theme-toggle:hover, .theme-toggle.active {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: var(--button-shadow);
}
.cosmos-toggle {
background: linear-gradient(45deg, #7b2cbf, #f72585);
color: white;
border: none;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 5px;
}
.cosmos-toggle:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 20px rgba(123, 44, 191, 0.4);
}
.cosmos-toggle.active {
background: linear-gradient(45deg, #f72585, #7b2cbf);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 20px rgba(123, 44, 191, 0.4);
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark-color);
cursor: pointer;
}
[data-theme="dark"] .mobile-menu-btn, [data-theme="cosmos"] .mobile-menu-btn {
color: white;
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100%;
background-color: var(--bg-color);
transition: var(--transition);
z-index: 1000;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
overflow-y: auto;
padding: 20px;
}
.mobile-menu.active {
right: 0;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .mobile-menu-header, [data-theme="cosmos"] .mobile-menu-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark-color);
cursor: pointer;
}
[data-theme="dark"] .mobile-menu-close, [data-theme="cosmos"] .mobile-menu-close {
color: white;
}
.mobile-menu-list {
list-style: none;
margin-bottom: 30px;
}
.mobile-menu-item {
margin-bottom: 15px;
}
.mobile-menu-link {
display: block;
color: var(--dark-color);
font-weight: 600;
padding: 10px 0;
transition: var(--transition);
}
[data-theme="dark"] .mobile-menu-link, [data-theme="cosmos"] .mobile-menu-link {
color: white;
}
.mobile-menu-link:hover {
color: var(--primary-color);
transform: translateX(10px);
}
/* Mobile Languages */
.mobile-languages {
margin-bottom: 30px;
}
.mobile-languages-title {
font-size: 1.1rem;
margin-bottom: 15px;
color: var(--dark-color);
}
[data-theme="dark"] .mobile-languages-title, [data-theme="cosmos"] .mobile-languages-title {
color: white;
}
.mobile-language-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mobile-language-option {
display: flex;
align-items: center;
padding: 8px 15px;
border-radius: 20px;
background-color: var(--card-bg);
color: var(--dark-color);
cursor: pointer;
transition: var(--transition);
}
[data-theme="dark"] .mobile-language-option, [data-theme="cosmos"] .mobile-language-option {
color: white;
}
.mobile-language-option:hover {
background-color: var(--primary-color);
color: white;
}
.mobile-language-option.active {
background-color: var(--primary-color);
color: white;
}
.mobile-language-option img {
width: 20px;
height: 20px;
margin-left: 8px;
border-radius: 50%;
}
/* Mobile Themes */
.mobile-themes {
margin-top: 30px;
}
.mobile-themes-title {
font-size: 1.1rem;
margin-bottom: 15px;
color: var(--dark-color);
}
[data-theme="dark"] .mobile-themes-title, [data-theme="cosmos"] .mobile-themes-title {
color: white;
}
.mobile-theme-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mobile-theme-option {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--card-bg);
color: var(--dark-color);
cursor: pointer;
transition: var(--transition);
}
[data-theme="dark"] .mobile-theme-option, [data-theme="cosmos"] .mobile-theme-option {
color: white;
}
.mobile-theme-option:hover {
transform: translateY(-3px);
box-shadow: var(--button-shadow);
}
.mobile-theme-option.active {
background-color: var(--primary-color);
color: white;
}
.mobile-cosmos-option {
background: linear-gradient(45deg, #7b2cbf, #f72585);
color: white;
}
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.overlay.active {
opacity: 1;
visibility: visible;
}
/* Hero Section */
.hero {
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.hero-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.hero-text {
flex: 1;
}
.hero-title {
font-size: 3rem;
margin-bottom: 20px;
color: var(--dark-color);
background: var(--primary-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
[data-theme="cosmos"] .hero-title {
background: linear-gradient(45deg, #f72585, #4cc9f0);
-webkit-background-clip: text;
background-clip: text;
}
.hero-subtitle {
display: inline-block;
background: var(--primary-gradient);
color: white;
padding: 8px 20px;
border-radius: 30px;
font-weight: 600;
margin-bottom: 20px;
box-shadow: var(--button-shadow);
}
[data-theme="cosmos"] .hero-subtitle {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.hero-description {
color: var(--text-color);
margin-bottom: 30px;
font-size: 1.1rem;
}
.hero-buttons {
display: flex;
gap: 15px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
text-align: center;
}
.btn-primary {
background: var(--primary-gradient);
color: white;
box-shadow: var(--button-shadow);
}
[data-theme="cosmos"] .btn-primary {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4);
}
[data-theme="cosmos"] .btn-primary:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.4);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--dark-color);
}
[data-theme="dark"] .btn-outline, [data-theme="cosmos"] .btn-outline {
color: white;
}
[data-theme="cosmos"] .btn-outline {
border-color: #7b2cbf;
}
.btn-outline:hover {
background: var(--primary-gradient);
color: white;
transform: translateY(-3px);
box-shadow: var(--button-shadow);
border-color: transparent;
}
[data-theme="cosmos"] .btn-outline:hover {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.4);
}
.hero-image {
flex: 1;
max-width: 500px;
position: relative;
}
.hero-img {
width: 100%;
border-radius: 10px;
box-shadow: var(--box-shadow);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* Typing Effect Container */
.typing-effect-container {
min-height: 60px;
margin-bottom: 20px;
}
/* About Us Section */
.about-us {
background-color: var(--light-color);
position: relative;
overflow: hidden;
}
[data-theme="dark"] .about-us {
background-color: var(--bg-color);
}
[data-theme="cosmos"] .about-us {
background: linear-gradient(to bottom, #240046, #3c096c);
}
.about-content {
display: flex;
align-items: center;
gap: 50px;
}
.about-image {
flex: 1;
max-width: 500px;
position: relative;
}
.about-img {
width: 100%;
border-radius: 10px;
box-shadow: var(--box-shadow);
}
.about-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
border-radius: 10px;
display: flex;
align-items: flex-end;
padding: 20px;
opacity: 0;
transition: var(--transition);
}
.about-image:hover .about-image-overlay {
opacity: 1;
}
.about-image-text {
color: white;
font-size: 1.5rem;
font-weight: 700;
}
.about-text {
flex: 1;
}
.about-title {
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--dark-color);
}
.about-subtitle {
display: inline-block;
background: var(--primary-gradient);
color: white;
padding: 5px 15px;
border-radius: 30px;
font-weight: 600;
margin-bottom: 20px;
font-size: 0.9rem;
}
[data-theme="cosmos"] .about-subtitle {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.about-description {
margin-bottom: 20px;
}
.about-features {
margin-bottom: 30px;
}
.about-feature {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.about-feature-icon {
width: 40px;
height: 40px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-left: 15px;
flex-shrink: 0;
}
[data-theme="cosmos"] .about-feature-icon {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.about-feature-text h4 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.about-feature-text p {
font-size: 0.9rem;
margin-bottom: 0;
}
.about-counters {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 30px;
}
.about-counter {
flex: 1;
min-width: 150px;
text-align: center;
padding: 20px;
background-color: var(--bg-color);
border-radius: 10px;
box-shadow: var(--card-shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.about-counter:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .about-counter:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.about-counter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--primary-gradient);
}
[data-theme="cosmos"] .about-counter::before {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.about-counter-number {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--primary-color);
}
[data-theme="cosmos"] .about-counter-number {
color: #7b2cbf;
}
.about-counter-text {
font-size: 1rem;
font-weight: 600;
}
/* Services Section */
.services {
background-color: var(--bg-color);
position: relative;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background-color: var(--card-bg);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
padding: 30px;
text-align: center;
position: relative;
z-index: 1;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .service-card:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-gradient);
opacity: 0;
transition: var(--transition);
z-index: -1;
}
[data-theme="cosmos"] .service-card::before {
background: linear-gradient(45deg, rgba(123, 44, 191, 0.8), rgba(58, 12, 163, 0.8));
}
.service-card:hover::before {
opacity: 1;
}
.service-icon {
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: var(--primary-color);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
position: relative;
z-index: 1;
}
[data-theme="cosmos"] .service-icon {
color: #7b2cbf;
}
.service-card:hover .service-icon {
background-color: rgba(255, 255, 255, 0.2);
color: white;
transform: rotateY(360deg);
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}
.service-title {
font-size: 1.5rem;
margin-bottom: 15px;
transition: var(--transition);
}
.service-card:hover .service-title {
color: white;
}
.service-text {
margin-bottom: 25px;
transition: var(--transition);
}
.service-card:hover .service-text {
color: rgba(255, 255, 255, 0.9);
}
/* API Services Section */
.api-services {
background-color: var(--light-color);
position: relative;
}
[data-theme="dark"] .api-services {
background-color: var(--bg-color);
}
[data-theme="cosmos"] .api-services {
background: linear-gradient(to bottom, #240046, #3c096c);
}
.api-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.api-card {
background-color: var(--bg-color);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
padding: 30px;
}
.api-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .api-card:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.api-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.api-icon {
width: 60px;
height: 60px;
background: var(--primary-gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
font-size: 1.5rem;
color: white;
box-shadow: var(--button-shadow);
transition: var(--transition);
}
[data-theme="cosmos"] .api-icon {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
box-shadow: 0 5px 15px rgba(123, 44, 191, 0.3);
}
.api-card:hover .api-icon {
transform: rotateY(360deg);
}
.api-title {
font-size: 1.3rem;
margin-bottom: 0;
}
.api-description {
margin-bottom: 20px;
}
.api-features {
margin-bottom: 25px;
}
.api-feature {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.api-feature i {
color: var(--success-color);
margin-left: 10px;
}
/* SPEEDY Section */
.speedy {
background-color: var(--bg-color);
position: relative;
overflow: hidden;
}
[data-theme="cosmos"] .speedy {
background: linear-gradient(to bottom, #3c096c, #5a189a);
}
.speedy-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://placehold.co/1920x1080/240046/fff?text=SPEEDY+Background') center/cover no-repeat;
opacity: 0.1;
z-index: 0;
pointer-events: none;
}
[data-theme="cosmos"] .speedy-overlay {
opacity: 0.2;
}
.speedy-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 50px;
}
.speedy-text {
flex: 1;
}
.speedy-title {
font-size: 2.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, #7b2cbf, #f72585);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
letter-spacing: 2px;
}
.speedy-subtitle {
display: inline-block;
background: linear-gradient(45deg, #7b2cbf, #f72585);
color: white;
padding: 8px 20px;
border-radius: 30px;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.speedy-description {
margin-bottom: 30px;
}
.speedy-features {
margin-bottom: 30px;
}
.speedy-feature {
display: flex;
align-items: center;
margin-bottom: 15px;
transition: var(--transition);
}
.speedy-feature:hover {
transform: translateX(10px);
}
.speedy-feature i {
width: 40px;
height: 40px;
background: linear-gradient(45deg, #7b2cbf, #f72585);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-left: 15px;
font-size: 1.2rem;
flex-shrink: 0;
}
.speedy-feature-text {
flex: 1;
}
.speedy-feature-text h4 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.speedy-feature-text p {
font-size: 0.9rem;
margin-bottom: 0;
}
.speedy-image {
flex: 1;
max-width: 500px;
position: relative;
perspective: 1000px;
}
.speedy-img {
width: 100%;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
transform-style: preserve-3d;
animation: speedy-rotate 8s infinite ease-in-out;
}
@keyframes speedy-rotate {
0%, 100% {
transform: rotateY(0) translateZ(0);
}
25% {
transform: rotateY(5deg) translateZ(20px);
}
50% {
transform: rotateY(0) translateZ(0);
}
75% {
transform: rotateY(-5deg) translateZ(20px);
}
}
.speedy-universe {
margin-top: 80px;
text-align: center;
}
.universe-title {
font-size: 2.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, #f72585, #4cc9f0);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
letter-spacing: 3px;
}
.universe-description {
max-width: 800px;
margin: 0 auto 40px;
}
.universe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}
.universe-card {
background-color: var(--card-bg);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
position: relative;
z-index: 1;
}
.universe-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.universe-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(123, 44, 191, 0.8), rgba(247, 37, 133, 0.8));
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.universe-card:hover::before {
opacity: 1;
}
.universe-image {
height: 200px;
overflow: hidden;
}
.universe-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.universe-card:hover .universe-img {
transform: scale(1.1);
}
.universe-content {
padding: 20px;
}
.universe-card-title {
font-size: 1.3rem;
margin-bottom: 10px;
transition: var(--transition);
}
.universe-card:hover .universe-card-title {
color: white;
}
.universe-card-text {
margin-bottom: 15px;
transition: var(--transition);
}
.universe-card:hover .universe-card-text {
color: rgba(255, 255, 255, 0.9);
}
.universe-card-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
color: var(--primary-color);
transition: var(--transition);
}
[data-theme="cosmos"] .universe-card-btn {
color: #f72585;
}
.universe-card:hover .universe-card-btn {
color: white;
}
/* Projects Section */
.projects {
background-color: var(--bg-color);
}
.project-categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.project-category-btn {
background-color: var(--card-bg);
color: var(--dark-color);
border: none;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
font-weight: 600;
}
[data-theme="dark"] .project-category-btn, [data-theme="cosmos"] .project-category-btn {
color: white;
}
.project-category-btn:hover, .project-category-btn.active {
background: var(--primary-gradient);
color: white;
transform: translateY(-3px);
box-shadow: var(--button-shadow);
}
[data-theme="cosmos"] .project-category-btn:hover, [data-theme="cosmos"] .project-category-btn.active {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
box-shadow: 0 5px 15px rgba(123, 44, 191, 0.3);
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.project-card {
background-color: var(--card-bg);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .project-card:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.project-image {
position: relative;
height: 200px;
overflow: hidden;
}
.project-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.project-card:hover .project-img {
transform: scale(1.1);
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
opacity: 0;
transition: var(--transition);
display: flex;
align-items: flex-end;
padding: 20px;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-tag {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-gradient);
color: white;
padding: 5px 15px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .project-tag {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.project-content {
padding: 20px;
}
.project-title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.project-description {
margin-bottom: 20px;
}
.project-meta {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-color);
}
.project-client, .project-date {
display: flex;
align-items: center;
}
.project-client i, .project-date i {
margin-left: 5px;
color: var(--primary-color);
}
[data-theme="cosmos"] .project-client i, [data-theme="cosmos"] .project-date i {
color: #f72585;
}
/* Packages Section */
.packages {
background-color: var(--light-color);
position: relative;
}
[data-theme="dark"] .packages {
background-color: var(--bg-color);
}
[data-theme="cosmos"] .packages {
background: linear-gradient(to bottom, #3c096c, #5a189a);
}
.package-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.package-card {
background-color: var(--bg-color);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
}
.package-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .package-card:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.package-header {
background: var(--primary-gradient);
color: white;
padding: 30px 20px;
text-align: center;
position: relative;
}
[data-theme="cosmos"] .package-header {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.package-popular {
position: absolute;
top: 15px;
right: -30px;
background-color: var(--accent-color);
color: white;
transform: rotate(45deg);
padding: 5px 40px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .package-popular {
background-color: #f72585;
}
.package-title {
font-size: 1.5rem;
color: white;
margin-bottom: 5px;
}
.package-price {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
}
.package-period {
font-size: 0.9rem;
opacity: 0.8;
}
.package-content {
padding: 30px;
}
.package-description {
margin-bottom: 25px;
}
.package-features {
margin-bottom: 30px;
}
.package-feature {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.package-feature i {
margin-left: 10px;
}
.package-feature.included i {
color: var(--success-color);
}
.package-feature.excluded {
opacity: 0.5;
}
.package-feature.excluded i {
color: var(--text-color);
}
/* Video Gallery Section */
.video-gallery {
background-color: var(--bg-color);
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.video-card {
background-color: var(--card-bg);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
}
.video-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .video-card:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.video-thumbnail {
position: relative;
height: 200px;
overflow: hidden;
}
.video-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.video-card:hover .video-img {
transform: scale(1.1);
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
opacity: 0.9;
transition: var(--transition);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
[data-theme="cosmos"] .video-play {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.video-card:hover .video-play {
transform: translate(-50%, -50%) scale(1.1);
opacity: 1;
}
.video-content {
padding: 20px;
}
.video-title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.video-description {
margin-bottom: 15px;
}
.video-meta {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-color);
}
.video-date, .video-views {
display: flex;
align-items: center;
}
.video-date i, .video-views i {
margin-left: 5px;
color: var(--primary-color);
}
[data-theme="cosmos"] .video-date i, [data-theme="cosmos"] .video-views i {
color: #f72585;
}
/* News and Articles Section */
.news {
background-color: var(--light-color);
}
[data-theme="dark"] .news {
background-color: var(--bg-color);
}
[data-theme="cosmos"] .news {
background: linear-gradient(to bottom, #5a189a, #7b2cbf);
}
.news-categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.news-category-btn {
background-color: var(--card-bg);
color: var(--dark-color);
border: none;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
font-weight: 600;
}
[data-theme="dark"] .news-category-btn, [data-theme="cosmos"] .news-category-btn {
color: white;
}
.news-category-btn:hover, .news-category-btn.active {
background: var(--primary-gradient);
color: white;
transform: translateY(-3px);
box-shadow: var(--button-shadow);
}
[data-theme="cosmos"] .news-category-btn:hover, [data-theme="cosmos"] .news-category-btn.active {
background: linear-gradient(45deg, #f72585, #7b2cbf);
box-shadow: 0 5px 15px rgba(247, 37, 133, 0.3);
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.news-card {
background-color: var(--bg-color);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
}
.news-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .news-card:hover {
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
}
.news-image {
position: relative;
height: 200px;
overflow: hidden;
}
.news-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.news-card:hover .news-img {
transform: scale(1.1);
}
.news-tag {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-gradient);
color: white;
padding: 5px 15px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
[data-theme="cosmos"] .news-tag {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.news-date {
position: absolute;
bottom: 20px;
left: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 15px;
border-radius: 30px;
font-size: 0.8rem;
display: flex;
align-items: center;
}
.news-date i {
margin-left: 5px;
}
.news-content {
padding: 20px;
}
.news-title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.news-description {
margin-bottom: 20px;
}
.news-author {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 10px;
object-fit: cover;
}
.author-info h4 {
font-size: 1rem;
margin-bottom: 0;
}
.author-info p {
font-size: 0.8rem;
color: var(--text-color);
margin-bottom: 0;
}
.news-link {
display: inline-flex;
align-items: center;
font-weight: 600;
}
.news-link i {
margin-right: 5px;
transition: var(--transition);
}
.news-link:hover i {
transform: translateX(-5px);
}
/* Chat Bot Section */
.chatbot {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
}
.chatbot-toggle {
width: 60px;
height: 60px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: var(--transition);
}
[data-theme="cosmos"] .chatbot-toggle {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.chatbot-toggle:hover {
transform: scale(1.1);
}
.chatbot-window {
position: absolute;
bottom: 80px;
left: 0;
width: 350px;
background-color: var(--bg-color);
border-radius: 15px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
display: none;
flex-direction: column;
height: 450px;
}
.chatbot-header {
padding: 15px 20px;
background: var(--primary-gradient);
color: white;
display: flex;
align-items: center;
justify-content: space-between;
}
[data-theme="cosmos"] .chatbot-header {
background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
}
.chatbot-title {
font-size: 1.1rem;
margin-bottom: 0;
color: white;
}
.chatbot-close {
background: none;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
}
.chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.chat-message {
margin-bottom: 15px;
max-width: 80%;
}
.bot-message {
background-color: var(--card-bg);
padding: 10px 15px;
border-radius: 15px 15px 15px 0;
margin-right: auto;
}
.user-message {
background: var(--primary-gradient);
color: white;
padding: 10px 15px;
border-radius: 15px 15px 0 15px;
margin-left: auto;
}
[data-theme="cosmos"] .user-message {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.chatbot-input {
display: flex;
padding: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .chatbot-input, [data-theme="cosmos"] .chatbot-input {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chatbot-input input {
flex: 1;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 30px;
outline: none;
background-color: var(--bg-color);
color: var(--text-color);
}
[data-theme="dark"] .chatbot-input input, [data-theme="cosmos"] .chatbot-input input {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.chatbot-send {
width: 40px;
height: 40px;
background: var(--primary-gradient);
border: none;
border-radius: 50%;
margin-right: 10px;
color: white;
cursor: pointer;
transition: var(--transition);
}
[data-theme="cosmos"] .chatbot-send {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.chatbot-send:hover {
transform: translateY(-3px);
box-shadow: var(--button-shadow);
}
/* Footer */
.footer {
background-color: var(--footer-bg);
padding-top: 80px;
color: white;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 50px;
}
.footer-widget h3 {
font-size: 1.3rem;
color: white;
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.footer-widget h3::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 3px;
background: var(--primary-gradient);
border-radius: 3px;
}
[data-theme="cosmos"] .footer-widget h3::after {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.footer-about p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
}
.footer-social {
display: flex;
gap: 10px;
}
.social-link {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: var(--transition);
}
.social-link:hover {
background: var(--primary-gradient);
transform: translateY(-5px);
}
[data-theme="cosmos"] .social-link:hover {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.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-block;
}
.footer-links a:hover {
color: white;
transform: translateX(10px);
}
.footer-contact p {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 15px;
}
.footer-contact i {
margin-left: 10px;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
}
[data-theme="cosmos"] .footer-contact i {
color: #f72585;
}
.footer-subscribe {
position: relative;
margin-top: 20px;
}
.footer-subscribe input {
width: 100%;
padding: 12px 15px;
padding-left: 50px;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 30px;
color: white;
outline: none;
}
.footer-subscribe button {
position: absolute;
left: 5px;
top: 5px;
width: 40px;
height: 40px;
background: var(--primary-gradient);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
transition: var(--transition);
}
[data-theme="cosmos"] .footer-subscribe button {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.footer-subscribe button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.footer-bottom {
padding: 20px 0;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0;
}
.footer-bottom a {
color: var(--primary-color);
}
[data-theme="cosmos"] .footer-bottom a {
color: #f72585;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: var(--transition);
opacity: 0;
visibility: hidden;
z-index: 99;
}
[data-theme="cosmos"] .back-to-top {
background: linear-gradient(45deg, #f72585, #7b2cbf);
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
/* Animation Classes */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive Styles */
@media (max-width: 992px) {
.hero-content, .about-content, .speedy-content {
flex-direction: column;
}
.hero-text, .hero-image, .about-text, .about-image, .speedy-text, .speedy-image {
max-width: 100%;
text-align: center;
}
.hero-image, .about-image, .speedy-image {
margin-top: 40px;
}
.hero-buttons, .about-features, .speedy-features {
justify-content: center;
}
.about-feature, .speedy-feature {
text-align: right;
}
.nav-list {
display: none;
}
.mobile-menu-btn {
display: block;
}
.services-grid, .api-grid, .project-grid, .package-grid, .video-grid, .news-grid, .universe-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.footer-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 768px) {
.hero-title, .about-title, .speedy-title, .universe-title {
font-size: 2.5rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
}
.hero-buttons .btn {
width: 100%;
margin-bottom: 10px;
}
.services-grid, .api-grid, .project-grid, .package-grid, .video-grid, .news-grid, .universe-grid {
grid-template-columns: 1fr;
}
.project-categories, .news-categories {
overflow-x: auto;
white-space: nowrap;
padding-bottom: 15px;
justify-content: flex-start;
}
.chatbot-window {
width: 320px;
}
}
@media (max-width: 576px) {
.hero-title, .about-title, .speedy-title, .universe-title {
font-size: 2rem;
}
.section-title h2 {
font-size: 2rem;
}
.theme-toggles {
display: none;
}
.chatbot-window {
width: 280px;
}
}
</style>
</head>
<body>
<!-- Particles.js Container -->
<div id="particles-js"></div>
<!-- Stars Container (for Cosmos Theme) -->
<div class="stars-container" id="stars-container"></div>
<!-- Header -->
<header class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-1-1.png" alt="FastPro Logo" class="logo-image">
<h1 class="logo-text">
<span class="logo-animated" id="logo-text">فاست برو</span>
</h1>
</div>
<nav>
<ul class="nav-list">
<li class="nav-item">
<a href="https://ufastpro.com/" class="nav-link active">الرئيسية</a>
</li>
<li class="nav-item">
<a href="#about-us" class="nav-link">نحن </a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link">خدماتنا</a>
</li>
<li class="nav-item">
<a href="#speedy" class="nav-link">ابحاثنا</a>
</li>
<li class="nav-item">
<a href="#projects" class="nav-link">مشاريعنا</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">تواصل معنا</a>
</li>
<li class="nav-item">
<a href="#packages" class="nav-link">سبيدي</a>
</li>
</ul>
</nav>
<!-- Language Selector -->
<div class="language-selector" id="language-selector">
<div class="current-lang" id="current-lang">
<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="العربية">
<span>العربية</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="lang-dropdown" id="lang-dropdown">
<div class="lang-option" data-lang="ar">
<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="العربية">
<span>العربية</span>
</div>
<div class="lang-option" data-lang="en">
<img src="https://placehold.co/100x100/0000ee/fff?text=EN" alt="English">
<span>English</span>
</div>
<div class="lang-option" data-lang="fr">
<img src="https://placehold.co/100x100/0000aa/fff?text=FR" alt="Français">
<span>Français</span>
</div>
</div>
</div>
<div class="theme-toggles">
<button class="theme-toggle light-toggle active" id="light-toggle" title="الوضع الفاتح">
<i class="fas fa-sun"></i>
</button>
<button class="theme-toggle dark-toggle" id="dark-toggle" title="الوضع الداكن">
<i class="fas fa-moon"></i>
</button>
<button class="cosmos-toggle" id="cosmos-toggle">
<i class="fas fa-rocket"></i> OUR UNIVERSE
</button>
</div>
<button class="mobile-menu-btn" id="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-header">
<div class="logo">
<img src="https://placehold.co/40x40/4facfe/fff?text=FP" alt="FastPro Logo" class="logo-image">
<h1 class="logo-text">فاست برو</h1>
</div>
<button class="mobile-menu-close" id="mobile-menu-close">
<i class="fas fa-times"></i>
</button>
</div>
<ul class="mobile-menu-list">
<li class="mobile-menu-item">
<a href="#" class="mobile-menu-link">الرئيسية</a>
</li>
<li class="mobile-menu-item">
<a href="#about-us" class="mobile-menu-link">من نحن</a>
</li>
<li class="mobile-menu-item">
<a href="#services" class="mobile-menu-link">خدماتنا</a>
</li>
<li class="mobile-menu-item">
<a href="#api-services" class="mobile-menu-link">خدمات API</a>
</li>
<li class="mobile-menu-item">
<a href="#speedy" class="mobile-menu-link">SPEEDY</a>
</li>
<li class="mobile-menu-item">
<a href="#projects" class="mobile-menu-link">مشاريعنا</a>
</li>
<li class="mobile-menu-item">
<a href="#packages" class="mobile-menu-link">باقاتنا</a>
</li>
<li class="mobile-menu-item">
<a href="#contact" class="mobile-menu-link">تواصل معنا</a>
</li>
</ul>
<!-- Mobile Languages -->
<div class="mobile-languages">
<h3 class="mobile-languages-title">اختر اللغة</h3>
<div class="mobile-language-options">
<div class="mobile-language-option active" data-lang="ar">
<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="العربية">
<span>العربية</span>
</div>
<div class="mobile-language-option" data-lang="en">
<img src="https://placehold.co/100x100/0000ee/fff?text=EN" alt="English">
<span>English</span>
</div>
<div class="mobile-language-option" data-lang="fr">
<img src="https://placehold.co/100x100/0000aa/fff?text=FR" alt="Français">
<span>Français</span>
</div>
</div>
</div>
<div class="mobile-themes">
<h3 class="mobile-themes-title">اختر المظهر</h3>
<div class="mobile-theme-options">
<button class="mobile-theme-option light-option active" id="mobile-light-toggle" title="الوضع الفاتح">
<i class="fas fa-sun"></i>
</button>
<button class="mobile-theme-option dark-option" id="mobile-dark-toggle" title="الوضع الداكن">
<i class="fas fa-moon"></i>
</button>
<button class="mobile-theme-option mobile-cosmos-option" id="mobile-cosmos-toggle" title="SPEEDY UNIVERSE">
<i class="fas fa-rocket"></i>
</button>
</div>
</div>
</div>
<!-- Overlay for Mobile Menu -->
<div class="overlay" id="overlay"></div>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text" data-aos="fade-left">
<span class="hero-subtitle">حلول الذكاء الاصطناعي المتطورة</span>
<h1 class="hero-title">
<div class="typing-effect-container" id="hero-typing"></div>
</h1>
<p class="hero-description">
نقدم حلول برمجية متكاملة ومبتكرة باستخدام أحدث تقنيات الذكاء الاصطناعي لمساعدتك على تحقيق أهدافك وتلبية احتياجاتك الرقمية بطريقة ذكية وفعالة.
</p>
<div class="hero-buttons">
<a href="#services" class="btn btn-primary">
<i class="fas fa-brain"></i> استكشف خدماتنا
</a>
<a href="#contact" class="btn btn-outline">
<i class="fas fa-envelope"></i> تواصل معنا
</a>
</div>
</div>
<div class="hero-image" data-aos="fade-right">
<img src="https://ufastpro.com/wp-content/uploads/2025/04/ChatGPT-Image-Apr-13-2025-02_35_20-AM.png" alt="حلول الذكاء الاصطناعي" class="hero-img">
</div>
</div>
</div>
</section>
<!-- About Us Section -->
<section class="about-us section" id="about-us">
<div class="container">
<div class="section-title">
<h2>من نحن</h2>
<p>تعرف على فريقنا المتميز وقصة نجاحنا في عالم الذكاء الاصطناعي</p>
</div>
<div class="about-content">
<div class="about-text" data-aos="fade-right">
<span class="about-subtitle">قصة نجاح متواصلة</span>
<h2 class="about-title">فاست برو - رواد تقنيات الذكاء الاصطناعي الحديثة</h2>
<p class="about-description">
تأسست شركة فاست برو في عام 2022 على يد مجموعة من الخبراء المتخصصين في مجال الذكاء الاصطناعي والبرمجة المتقدمة، بهدف تقديم حلول تقنية مبتكرة تساعد الشركات والمؤسسات على مواكبة التطور التكنولوجي السريع في العصر الرقمي.
</p>
<p class="about-description">
نحن نؤمن بأن الذكاء الاصطناعي هو مستقبل التكنولوجيا، ونعمل جاهدين على تطوير حلول ذكية مخصصة تلبي احتياجات عملائنا وتساعدهم على تحقيق أقصى استفادة من التقنيات الحديثة.
</p>
<div class="about-features">
<div class="about-feature" data-aos="fade-up" data-aos-delay="100">
<div class="about-feature-icon">
<i class="fas fa-check"></i>
</div>
<div class="about-feature-text">
<h4>خبرة متخصصة</h4>
<p>فريق من الخبراء المتخصصين في مجالات الذكاء الاصطناعي وتطوير البرمجيات والتحول الرقمي.</p>
</div>
</div>
<div class="about-feature" data-aos="fade-up" data-aos-delay="200">
<div class="about-feature-icon">
<i class="fas fa-check"></i>
</div>
<div class="about-feature-text">
<h4>حلول مخصصة</h4>
<p>نطور حلول تقنية مخصصة تناسب احتياجات كل عميل، مع التركيز على تحقيق أهدافه الاستراتيجية.</p>
</div>
</div>
<div class="about-feature" data-aos="fade-up" data-aos-delay="300">
<div class="about-feature-icon">
<i class="fas fa-check"></i>
</div>
<div class="about-feature-text">
<h4>تقنيات متطورة</h4>
<p>نستخدم أحدث التقنيات والأدوات في مجال الذكاء الاصطناعي وتطوير البرمجيات لضمان تقديم أفضل الحلول.</p>
</div>
</div>
</div>
<a href="#contact" class="btn btn-primary">
<i class="fas fa-users"></i> تعرف على فريقنا
</a>
</div>
<div class="about-image" data-aos="fade-left">
<img src="https://ufastpro.com/wp-content/uploads/2025/04/Blue-and-White-Illustrative-Brainstorm-Presentation.jpg" alt="من نحن" class="about-img">
<div class="about-image-overlay">
<div class="about-image-text">فاست برو - ابتكار بلا حدود</div>
</div>
</div>
</div>
<div class="about-counters">
<div class="about-counter" data-aos="zoom-in" data-aos-delay="100">
<div class="about-counter-number count-up" data-count="150">0</div>
<div class="about-counter-text">عميل حول العالم</div>
</div>
<div class="about-counter" data-aos="zoom-in" data-aos-delay="200">
<div class="about-counter-number count-up" data-count="300">0</div>
<div class="about-counter-text">مشروع ناجح</div>
</div>
<div class="about-counter" data-aos="zoom-in" data-aos-delay="300">
<div class="about-counter-number count-up" data-count="50">0</div>
<div class="about-counter-text">خبير متخصص</div>
</div>
<div class="about-counter" data-aos="zoom-in" data-aos-delay="400">
<div class="about-counter-number count-up" data-count="10">0</div>
<div class="about-counter-text">جوائز تقنية</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services section" id="services">
<div class="container">
<div class="section-title">
<h2>خدماتنا</h2>
<p>مجموعة متكاملة من الخدمات المتطورة لتلبية احتياجات عملك</p>
</div>
<div class="services-grid">
<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">الذكاء الاصطناعي</h3>
<p class="service-text">
تطوير حلول ذكاء اصطناعي مخصصة لتحسين عمليات الأعمال وزيادة الإنتاجية وتوفير تجارب مستخدم فريدة، مع التركيز على التعلم الآلي ومعالجة اللغات الطبيعية.
</p>
<a href="#" class="btn btn-primary">المزيد</a>
</div>
<div class="service-card" data-aos="fade-up" data-aos-delay="200">
<div class="service-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3 class="service-title">تطبيقات الجوال</h3>
<p class="service-text">
تصميم وتطوير تطبيقات جوال عصرية وسهلة الاستخدام لمنصات iOS و Android مع دعم كامل للغة العربية والتكامل مع حلول الذكاء الاصطناعي المتقدمة.
</p>
<a href="#" class="btn btn-primary">المزيد</a>
</div>
<div class="service-card" data-aos="fade-up" data-aos-delay="300">
<div class="service-icon">
<i class="fas fa-globe"></i>
</div>
<h3 class="service-title">تطوير الويب</h3>
<p class="service-text">
إنشاء مواقع ويب متجاوبة وتطبيقات ويب متطورة مع واجهات مستخدم جذابة ووظائف متقدمة تعمل بسلاسة على جميع الأجهزة والمتصفحات.
</p>
<a href="#" class="btn btn-primary">المزيد</a>
</div>
<div class="service-card" data-aos="fade-up" data-aos-delay="400">
<div class="service-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="service-title">تحليل البيانات</h3>
<p class="service-text">
تحليل البيانات الضخمة واستخراج رؤى قيمة لدعم اتخاذ القرارات وتحسين استراتيجيات العمل من خلال تقنيات التعلم الآلي والتحليلات التنبؤية.
</p>
<a href="#" class="btn btn-primary">المزيد</a>
</div>
<div class="service-card" data-aos="fade-up" data-aos-delay="500">
<div class="service-icon">
<i class="fas fa-lock"></i>
</div>
<h3 class="service-title">أمن المعلومات</h3>
<p class="service-text">
حماية أنظمتك وبياناتك من التهديدات الإلكترونية مع حلول أمنية متكاملة تعتمد على الذكاء الاصطناعي للكشف المبكر عن محاولات الاختراق ومنعها.
</p>
<a href="#" class="btn btn-primary">المزيد</a>
</div>
<div class="service-card" data-aos="fade-up" data-aos-delay="600">
<div class="service-icon">
<i class="fas fa-cloud"></i>
</div>
<h3 class="service-title">الحوسبة السحابية</h3>
<p class="service-text">
توفير حلول سحابية مرنة وقابلة للتوسع لتخزين البيانات ومعالجتها بكفاءة وأمان، مع دعم كامل للتكامل مع خدمات الحوسبة السحابية الرائدة.
</p>
<a href="#" class="btn btn-primary">المزيد</a>
</div>
</div>
</div>
</section>
<!-- API Services Section -->
<section class="api-services section" id="api-services">
<div class="container">
<div class="section-title">
<h2>خدمات API</h2>
<p>واجهات برمجة قوية ومرنة لتكامل سهل مع أنظمتك</p>
</div>
<div class="api-grid">
<div class="api-card" data-aos="fade-up" data-aos-delay="100">
<div class="api-header">
<div class="api-icon">
<i class="fas fa-language"></i>
</div>
<h3 class="api-title">معالجة اللغة الطبيعية</h3>
</div>
<p class="api-description">
واجهة برمجة متطورة لتحليل وفهم النصوص العربية والإنجليزية بدقة عالية، مدعومة بأحدث تقنيات الذكاء الاصطناعي.
</p>
<div class="api-features">
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>تحليل المشاعر والآراء بدقة تفوق 95%</span>
</div>
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>استخراج الكيانات والمعلومات المهمة</span>
</div>
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>دعم كامل للهجات العربية المختلفة</span>
</div>
</div>
<a href="#" class="btn btn-primary">استكشاف API</a>
</div>
<div class="api-card" data-aos="fade-up" data-aos-delay="200">
<div class="api-header">
<div class="api-icon">
<i class="fas fa-image"></i>
</div>
<h3 class="api-title">تحليل الصور والرؤية</h3>
</div>
<p class="api-description">
تحليل الصور والفيديوهات باستخدام الذكاء الاصطناعي لاستخراج معلومات قيمة وتحسين تجربة المستخدم.
</p>
<div class="api-features">
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>التعرف على الوجوه والأشياء بدقة عالية</span>
</div>
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>استخراج النصوص من الصور بلغات متعددة</span>
</div>
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>تحسين جودة الصور تلقائيًا</span>
</div>
</div>
<a href="#" class="btn btn-primary">استكشاف API</a>
</div>
<div class="api-card" data-aos="fade-up" data-aos-delay="300">
<div class="api-header">
<div class="api-icon">
<i class="fas fa-microphone"></i>
</div>
<h3 class="api-title">التعرف على الكلام</h3>
</div>
<p class="api-description">
تحويل الكلام إلى نص بدقة عالية مع دعم اللغة العربية واللهجات المختلفة، وتحليل نبرة الصوت والمشاعر.
</p>
<div class="api-features">
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>دعم التعرف على كلام متعدد المتحدثين</span>
</div>
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>تحويل النص إلى كلام طبيعي وواقعي</span>
</div>
<div class="api-feature">
<i class="fas fa-check-circle"></i>
<span>دعم اللهجات العربية المختلفة</span>
</div>
</div>
<a href="#" class="btn btn-primary">استكشاف API</a>
</div>
</div>
</div>
</section>
<!-- SPEEDY Section -->
<section class="speedy section" id="speedy">
<div class="speedy-overlay"></div>
<div class="container">
<div class="section-title">
<h2>SPEEDY</h2>
<p>نموذج الذكاء الاصطناعي المتطور للشركات والمؤسسات</p>
</div>
<div class="speedy-content">
<div class="speedy-text" data-aos="fade-right">
<span class="speedy-subtitle">الجيل القادم من الذكاء الاصطناعي</span>
<h2 class="speedy-title">SPEEDY MODEL</h2>
<p class="speedy-description">
نموذج SPEEDY هو أحدث إصداراتنا في مجال الذكاء الاصطناعي، مصمم خصيصًا لتلبية احتياجات الشركات والمؤسسات التي تتطلع إلى تحقيق قفزة نوعية في أعمالها باستخدام التقنيات الذكية.
</p>
<p class="speedy-description">
بفضل قدراته الفائقة على معالجة البيانات وفهم اللغات الطبيعية واتخاذ القرارات المعقدة، يمكن لنموذج SPEEDY أن يحدث ثورة في طريقة إدارة أعمالك وتفاعلك مع عملائك.
</p>
<div class="speedy-features">
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="100">
<i class="fas fa-bolt"></i>
<div class="speedy-feature-text">
<h4>سرعة فائقة في المعالجة</h4>
<p>معالجة البيانات والاستجابة للاستعلامات بسرعة تفوق النماذج التقليدية بنسبة 200%.</p>
</div>
</div>
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="200">
<i class="fas fa-brain"></i>
<div class="speedy-feature-text">
<h4>فهم لغوي متقدم</h4>
<p>فهم واستيعاب اللغات الطبيعية بدقة عالية، مع دعم كامل للغة العربية واللهجات المختلفة.</p>
</div>
</div>
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="300">
<i class="fas fa-chart-pie"></i>
<div class="speedy-feature-text">
<h4>تحليلات ذكية</h4>
<p>تحليل البيانات واستخراج رؤى قيمة لدعم اتخاذ القرارات الاستراتيجية في مؤسستك.</p>
</div>
</div>
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="400">
<i class="fas fa-cog"></i>
<div class="speedy-feature-text">
<h4>قابلية التخصيص</h4>
<p>إمكانية تخصيص النموذج ليناسب احتياجات عملك الفريدة وتطبيقاته المختلفة.</p>
</div>
</div>
</div>
<a href="#contact" class="btn btn-primary">
<i class="fas fa-rocket"></i> جرب SPEEDY الآن
</a>
</div>
<div class="speedy-image" data-aos="fade-left">
<img src="https://ufastpro.com/wp-content/uploads/2025/04/تصميم-بدون-عنوان-1.jpg" alt="SPEEDY AI" class="speedy-img">
</div>
</div>
<div class="speedy-universe">
<h2 class="universe-title" data-aos="zoom-in">SPEEDY UNIVERSE</h2>
<p class="universe-description" data-aos="zoom-in">
اكتشف عالمًا كاملًا من التطبيقات والأدوات المدعومة بنموذج SPEEDY، والتي تتكامل معًا لتوفير تجربة ذكاء اصطناعي شاملة.
</p>
<div class="universe-grid">
<div class="universe-card" data-aos="flip-left" data-aos-delay="100">
<div class="universe-image">
<img src="https://placehold.co/600x400/7b2cbf/fff?text=SPEEDY+Chat" alt="SPEEDY Chat" class="universe-img">
</div>
<div class="universe-content">
<h3 class="universe-card-title">SPEEDY Chat</h3>
<p class="universe-card-text">
روبوت محادثة ذكي متعدد اللغات قادر على فهم استفسارات العملاء والرد عليها بدقة عالية على مدار الساعة.
</p>
<a href="#" class="universe-card-btn">
اكتشف المزيد <i class="fas fa-arrow-left"></i>
</a>
</div>
</div>
<div class="universe-card" data-aos="flip-left" data-aos-delay="200">
<div class="universe-image">
<img src="https://placehold.co/600x400/7b2cbf/fff?text=SPEEDY+Analytics" alt="SPEEDY Analytics" class="universe-img">
</div>
<div class="universe-content">
<h3 class="universe-card-title">SPEEDY Analytics</h3>
<p class="universe-card-text">
منصة تحليلات ذكية تمكنك من استخراج رؤى قيمة من بياناتك واتخاذ قرارات مستنيرة لتطوير أعمالك.
</p>
<a href="#" class="universe-card-btn">
اكتشف المزيد <i class="fas fa-arrow-left"></i>
</a>
</div>
</div>
<div class="universe-card" data-aos="flip-left" data-aos-delay="300">
<div class="universe-image">
<img src="https://placehold.co/600x400/7b2cbf/fff?text=SPEEDY+Vision" alt="SPEEDY Vision" class="universe-img">
</div>
<div class="universe-content">
<h3 class="universe-card-title">SPEEDY Vision</h3>
<p class="universe-card-text">
تقنية رؤية اصطناعية متقدمة قادرة على تحليل الصور والفيديوهات والتعرف على الأشخاص والأشياء بدقة عالية.
</p>
<a href="#" class="universe-card-btn">
اكتشف المزيد <i class="fas fa-arrow-left"></i>
</a>
</div>
</div>
<div class="universe-card" data-aos="flip-left" data-aos-delay="400">
<div class="universe-image">
<img src="https://placehold.co/600x400/7b2cbf/fff?text=SPEEDY+Voice" alt="SPEEDY Voice" class="universe-img">
</div>
<div class="universe-content">
<h3 class="universe-card-title">SPEEDY Voice</h3>
<p class="universe-card-text">
أداة متطورة للتعرف على الكلام وتحويله إلى نص، مع إمكانية تحويل النص إلى كلام طبيعي بلغات متعددة.
</p>
<a href="#" class="universe-card-btn">
اكتشف المزيد <i class="fas fa-arrow-left"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section class="projects section" id="projects">
<div class="container">
<div class="section-title">
<h2>مشاريعنا</h2>
<p>نفخر بتقديم حلول مبتكرة للعديد من العملاء في مختلف القطاعات</p>
</div>
<div class="project-categories">
<button class="project-category-btn active" data-filter="all">الكل</button>
<button class="project-category-btn" data-filter="ai">الذكاء الاصطناعي</button>
<button class="project-category-btn" data-filter="mobile">تطبيقات الجوال</button>
<button class="project-category-btn" data-filter="web">تطوير الويب</button>
<button class="project-category-btn" data-filter="data">تحليل البيانات</button>
</div>
<div class="project-grid">
<div class="project-card" data-category="ai" data-aos="fade-up" data-aos-delay="100">
<div class="project-image">
<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="مشروع ذكاء اصطناعي" class="project-img">
<div class="project-overlay">
<a href="#" class="btn btn-primary">عرض التفاصيل</a>
</div>
<div class="project-tag">ذكاء اصطناعي</div>
</div>
<div class="project-content">
<h3 class="project-title">منصة مستشارك</h3>
<p class="project-description">
نموذج ذكاء اصطناعي قانوني يحلل القضايا، يدعم المحامين بالاستشارات، ويصيغ العقود تلقائيًا باستخدام تقنيات متقدمة. والمزيد
</p>
<div class="project-meta">
<div class="project-client">
<i class="fas fa-building"></i>
<span>للمحامين والمستشارين وللمؤسسات القانونية</span>
</div>
<div class="project-date">
<i class="fas fa-calendar-alt"></i>
<span>2025</span>
</div>
</div>
</div>
</div>
<div class="project-card" data-category="mobile" data-aos="fade-up" data-aos-delay="200">
<div class="project-image">
<img src="https://ufastpro.com/wp-content/uploads/2024/11/f-stpro-1-1.png" alt="تطبيق جوال" class="project-img">
<div class="project-overlay">
<a href="#" class="btn btn-primary">عرض التفاصيل</a>
</div>
<div class="project-tag">تطبيق ذكاءاصطناعي</div>
</div>
<div class="project-content">
<h3 class="project-title">مراجعك اللغوي</h3>
<p class="project-description">
تطبيق مراجع لغوي ذكي يراجع النصوص المترجمة، يكتشف الأخطاء اللغوية والأسلوبية، ويدعم المترجمين في تحسين جودة الترجمة بدقة وسرعة.
</p>
<div class="project-meta">
<div class="project-client">
<i class="fas fa-hospital"></i>
<span>ذكاء اصطناعي</span>
</div>
<div class="project-date">
<i class="fas fa-calendar-alt"></i>
<span>2024</span>
</div>
</div>
</div>
</div>
<div class="project-card" data-category="web" data-aos="fade-up" data-aos-delay="300">
<div class="project-image">
<img src="https://ufastpro.com/wp-content/uploads/2025/04/تصميم-بدون-عنوان-1.jpg" alt="بوابة إلكترونية" class="project-img">
<div class="project-overlay">
<a href="#" class="btn btn-primary">عرض التفاصيل</a>
</div>
<div class="project-tag">ذكاء اصطناعي</div>
</div>
<div class="project-content">
<h3 class="project-title">نموذج سبيدي</h3>
<p class="project-description">
سبيدي: نظام ذكاء اصطناعي شامل يجمع بين التحليل النصي، توليد الردود، فهم المشاعر، حل المعادلات، وتحليل الوسائط، لتقديم تجربة تفاعلية متقدمة تشبه المساعد الشخصي الذكي.
</p>
<div class="project-meta">
<div class="project-client">
<i class="fas fa-graduation-cap"></i>
<span>ذكاء اصطناعي</span>
</div>
<div class="project-date">
<i class="fas fa-calendar-alt"></i>
<span>2025</span>
</div>
</div>
</div>
</div>
<div class="project-card" data-category="data" data-aos="fade-up" data-aos-delay="400">
<div class="project-image">
<img src="https://placehold.co/600x400/4facfe/fff?text=Data+Analytics" alt="تحليل بيانات" class="project-img">
<div class="project-overlay">
<a href="#" class="btn btn-primary">عرض التفاصيل</a>
</div>
<div class="project-tag">تحليل بيانات</div>
</div>
<div class="project-content">
<h3 class="project-title">نظام تحليل بيانات العملاء</h3>
<p class="project-description">
نظام متكامل لتحليل بيانات العملاء وسلوكهم الشرائي لتقديم رؤى قيمة وتحسين استراتيجيات التسويق.
</p>
<div class="project-meta">
<div class="project-client">
<i class="fas fa-store"></i>
<span>شركة البيع بالتجزئة</span>
</div>
<div class="project-date">
<i class="fas fa-calendar-alt"></i>
<span>2024</span>
</div>
</div>
</div>
</div>
<div class="project-card" data-category="ai" data-aos="fade-up" data-aos-delay="500">
<div class="project-image">
<img src="https://placehold.co/600x400/4facfe/fff?text=AI+Chatbot" alt="روبوت محادثة ذكي" class="project-img">
<div class="project-overlay">
<a href="#" class="btn btn-primary">عرض التفاصيل</a>
</div>
<div class="project-tag">ذكاء اصطناعي</div>
</div>
<div class="project-content">
<h3 class="project-title">روبوت محادثة متقدم</h3>
<p class="project-description">
روبوت محادثة ذكي متعدد اللغات لخدمة العملاء على مدار الساعة بقدرات فهم متقدمة واستجابة دقيقة.
</p>
<div class="project-meta">
<div class="project-client">
<i class="fas fa-headset"></i>
<span>مركز خدمة العملاء</span>
</div>
<div class="project-date">
<i class="fas fa-calendar-alt"></i>
<span>2025</span>
</div>
</div>
</div>
</div>
<div class="project-card" data-category="mobile" data-aos="fade-up" data-aos-delay="600">
<div class="project-image">
<img src="https://placehold.co/600x400/4facfe/fff?text=Fitness+App" alt="تطبيق لياقة" class="project-img">
<div class="project-overlay">
<a href="#" class="btn btn-primary">عرض التفاصيل</a>
</div>
<div class="project-tag">تطبيق جوال</div>
</div>
<div class="project-content">
<h3 class="project-title">تطبيق اللياقة الذكي</h3>
<p class="project-description">
تطبيق لياقة متكامل مع برامج تدريبية مخصصة تتكيف مع مستوى المستخدم وأهدافه الصحية.
</p>
<div class="project-meta">
<div class="project-client">
<i class="fas fa-dumbbell"></i>
<span>نادي اللياقة الشامل</span>
</div>
<div class="project-date">
<i class="fas fa-calendar-alt"></i>
<span>2024</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer" id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-widget footer-about">
<h3>عن فاست برو</h3>
<p>
شركة رائدة في مجال تقنيات الذكاء الاصطناعي وتطوير البرمجيات المتقدمة، نقدم حلول مبتكرة ومخصصة لمساعدة عملائنا على تحقيق النجاح في العصر الرقمي.
</p>
<div class="footer-social">
<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>روابط سريعة</h3>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#about-us">من نحن</a></li>
<li><a href="#services">خدماتنا</a></li>
<li><a href="#api-services">خدمات API</a></li>
<li><a href="#speedy">SPEEDY</a></li>
<li><a href="#projects">مشاريعنا</a></li>
<li><a href="#packages">باقاتنا</a></li>
</ul>
</div>
<div class="footer-widget footer-links">
<h3>تفضيلات أخرى</h3>
<ul>
<li><a href="#">فريق العمل</a></li>
<li><a href="#">الوظائف المتاحة</a></li>
<li><a href="#">الشروط والأحكام</a></li>
<li><a href="#">سياسة الخصوصية</a></li>
<li><a href="#">المدونة</a></li>
<li><a href="#">الأسئلة الشائعة</a></li>
<li><a href="#">خريطة الموقع</a></li>
</ul>
</div>
<div class="footer-widget footer-contact">
<h3>تواصل معنا</h3>
<p>
<i class="fas fa-map-marker-alt"></i>
<span>القاهرة، جمهورية مصر العربية</span>
</p>
<p>
<i class="fas fa-phone-alt"></i>
<span>+20 123 456 7890</span>
</p>
<p>
<i class="fas fa-envelope"></i>
<span>[email protected]</span>
</p>
<div class="footer-subscribe">
<input type="email" placeholder="البريد الإلكتروني للنشرة الإخبارية">
<button><i class="fas fa-paper-plane"></i></button>
</div>
</div>
</div>
<div class="footer-bottom">
<p>
جميع الحقوق محفوظة &copy; 2025 فاست برو للذكاء الاصطناعي
</p>
</div>
</div>
</footer>
<!-- Chatbot -->
<div class="chatbot">
<div class="chatbot-toggle" id="chatbot-toggle">
<i class="fas fa-comment-dots"></i>
</div>
<div class="chatbot-window" id="chatbot-window">
<div class="chatbot-header">
<h3 class="chatbot-title">مساعد فاست برو</h3>
<button class="chatbot-close" id="chatbot-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="chatbot-messages" id="chatbot-messages">
<div class="chat-message bot-message">
مرحبًا! أنا مساعد فاست برو الافتراضي المدعوم بتقنية SPEEDY. كيف يمكنني مساعدتك اليوم؟
</div>
</div>
<div class="chatbot-input">
<input type="text" id="chat-input" placeholder="اكتب رسالتك هنا...">
<button class="chatbot-send" id="chat-send">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<!-- Back to Top Button -->
<div class="back-to-top" id="back-to-top">
<i class="fas fa-arrow-up"></i>
</div>
<script>
// Initialize AOS
document.addEventListener('DOMContentLoaded', function() {
AOS.init({
duration: 800,
once: true,
offset: 100
});
// Initialize Typed.js for Hero Section
const heroTyped = new Typed('#hero-typing', {
strings: [
'نبتكر المستقبل مع تقنيات الذكاء الاصطناعي المتقدمة',
'نطور حلول ذكية تناسب احتياجات عملك الفريدة',
'نحول أفكارك إلى واقع رقمي متطور',
'نرتقي بأعمالك إلى آفاق جديدة من النجاح'
],
typeSpeed: 50,
backSpeed: 30,
backDelay: 3000,
loop: true
});
// Initialize Logo Typing Effect
const logoTyped = new Typed('#logo-text', {
strings: ['فاست برو','فاست برو', 'FastPro'],
typeSpeed: 50,
backSpeed: 30,
backDelay: 5000,
loop: true
});
// Count Up Animation
const countUpElements = document.querySelectorAll('.count-up');
function animateCountUp(el) {
const target = parseInt(el.getAttribute('data-count'));
const count = parseInt(el.innerText);
const increment = target / 50;
if (count < target) {
el.innerText = Math.ceil(count + increment);
setTimeout(function() {
animateCountUp(el);
}, 50);
} else {
el.innerText = target;
}
}
// Initialize count animations when elements are in viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateCountUp(entry.target);
observer.unobserve(entry.target);
}
});
}, {threshold: 0.5});
countUpElements.forEach(el => {
observer.observe(el);
});
});
// Theme Toggle
const lightToggle = document.getElementById('light-toggle');
const darkToggle = document.getElementById('dark-toggle');
const cosmosToggle = document.getElementById('cosmos-toggle');
const mobileLightToggle = document.getElementById('mobile-light-toggle');
const mobileDarkToggle = document.getElementById('mobile-dark-toggle');
const mobileCosmosToggle = document.getElementById('mobile-cosmos-toggle');
const body = document.body;
function setTheme(theme) {
body.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
// Update active states
lightToggle.classList.remove('active');
darkToggle.classList.remove('active');
cosmosToggle.classList.remove('active');
mobileLightToggle.classList.remove('active');
mobileDarkToggle.classList.remove('active');
mobileCosmosToggle.classList.remove('active');
if (theme === 'light' || !theme) {
lightToggle.classList.add('active');
mobileLightToggle.classList.add('active');
initParticles('#4facfe');
} else if (theme === 'dark') {
darkToggle.classList.add('active');
mobileDarkToggle.classList.add('active');
initParticles('#6078ff');
} else if (theme === 'cosmos') {
cosmosToggle.classList.add('active');
mobileCosmosToggle.classList.add('active');
initParticles('#e0aaff');
createStars();
}
}
lightToggle.addEventListener('click', () => setTheme('light'));
darkToggle.addEventListener('click', () => setTheme('dark'));
cosmosToggle.addEventListener('click', () => setTheme('cosmos'));
mobileLightToggle.addEventListener('click', () => {
setTheme('light');
closeMobileMenu();
});
mobileDarkToggle.addEventListener('click', () => {
setTheme('dark');
closeMobileMenu();
});
mobileCosmosToggle.addEventListener('click', () => {
setTheme('cosmos');
closeMobileMenu();
});
// Load saved theme
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
}
// Create stars for cosmos theme
function createStars() {
const starsContainer = document.getElementById('stars-container');
starsContainer.innerHTML = '';
// Create small stars
for (let i = 0; i < 200; i++) {
const star = document.createElement('div');
star.classList.add('star');
const size = Math.random() * 2 + 1;
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.animationDelay = `${Math.random() * 5}s`;
starsContainer.appendChild(star);
}
// Create shooting stars
for (let i = 0; i < 5; i++) {
const shootingStar = document.createElement('div');
shootingStar.classList.add('shooting-star');
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
shootingStar.style.left = `${x}px`;
shootingStar.style.top = `${y}px`;
shootingStar.style.animationDelay = `${Math.random() * 15}s`;
starsContainer.appendChild(shootingStar);
}
}
// Initialize Particles.js
function initParticles(color) {
particlesJS('particles-js', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: color
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000'
}
},
opacity: {
value: 0.5,
random: false,
animation: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
animation: {
enable: true,
speed: 2,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: color,
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
}
// Initialize default particles
initParticles('#4facfe');
// Language Selector
const currentLang = document.getElementById('current-lang');
const langDropdown = document.getElementById('lang-dropdown');
const langOptions = document.querySelectorAll('.lang-option');
const mobileLangOptions = document.querySelectorAll('.mobile-language-option');
currentLang.addEventListener('click', function() {
langDropdown.style.display = langDropdown.style.display === 'block' ? 'none' : 'block';
});
document.addEventListener('click', function(event) {
if (!currentLang.contains(event.target) && !langDropdown.contains(event.target)) {
langDropdown.style.display = 'none';
}
});
function setLanguage(lang) {
// In a real application, this would switch the language
document.documentElement.setAttribute('lang', lang);
// Update the current language display
const selectedOption = document.querySelector(`.lang-option[data-lang="${lang}"]`);
const mobileSelectedOption = document.querySelector(`.mobile-language-option[data-lang="${lang}"]`);
if (selectedOption) {
currentLang.innerHTML = selectedOption.innerHTML;
}
// Update active states
langOptions.forEach(option => {
option.classList.remove('active');
});
mobileLangOptions.forEach(option => {
option.classList.remove('active');
});
if (selectedOption) {
selectedOption.classList.add('active');
}
if (mobileSelectedOption) {
mobileSelectedOption.classList.add('active');
}
localStorage.setItem('language', lang);
// Close the dropdown
langDropdown.style.display = 'none';
// In a real application, you would reload content in the selected language
// This is just a placeholder for demonstration
let title, subtitle;
if (lang === 'ar') {
title = 'فاست برو - حلول الذكاء الاصطناعي المتقدمة';
document.body.style.direction = 'rtl';
} else if (lang === 'en') {
title = 'FastPro - Advanced AI Solutions';
document.body.style.direction = 'ltr';
} else if (lang === 'fr') {
title = 'FastPro - Solutions IA Avancées';
document.body.style.direction = 'ltr';
}
document.title = title;
}
langOptions.forEach(option => {
option.addEventListener('click', function() {
const lang = this.getAttribute('data-lang');
setLanguage(lang);
});
});
mobileLangOptions.forEach(option => {
option.addEventListener('click', function() {
const lang = this.getAttribute('data-lang');
setLanguage(lang);
closeMobileMenu();
});
});
// Load saved language
const savedLanguage = localStorage.getItem('language');
if (savedLanguage) {
setLanguage(savedLanguage);
}
// Mobile Menu
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuClose = document.getElementById('mobile-menu-close');
const overlay = document.getElementById('overlay');
function openMobileMenu() {
mobileMenu.classList.add('active');
overlay.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeMobileMenu() {
mobileMenu.classList.remove('active');
overlay.classList.remove('active');
document.body.style.overflow = '';
}
mobileMenuBtn.addEventListener('click', openMobileMenu);
mobileMenuClose.addEventListener('click', closeMobileMenu);
overlay.addEventListener('click', closeMobileMenu);
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
// Close mobile menu if open
closeMobileMenu();
// Scroll to target
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Project category filtering
const projectCategoryBtns = document.querySelectorAll('.project-category-btn');
const projectCards = document.querySelectorAll('.project-card');
projectCategoryBtns.forEach(btn => {
btn.addEventListener('click', function() {
// Remove active class from all buttons
projectCategoryBtns.forEach(b => b.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
const filter = this.getAttribute('data-filter');
projectCards.forEach(card => {
if (filter === 'all') {
card.style.display = 'block';
} else {
if (card.getAttribute('data-category') === filter) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
}
});
});
});
// Back to Top Button
const backToTopBtn = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopBtn.classList.add('active');
} else {
backToTopBtn.classList.remove('active');
}
});
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Header Scroll Effect
const header = document.querySelector('.header');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Chatbot functionality
const chatbotToggle = document.getElementById('chatbot-toggle');
const chatbotWindow = document.getElementById('chatbot-window');
const chatbotClose = document.getElementById('chatbot-close');
const chatbotMessages = document.getElementById('chatbot-messages');
const chatInput = document.getElementById('chat-input');
const chatSend = document.getElementById('chat-send');
chatbotToggle.addEventListener('click', function() {
chatbotWindow.style.display = chatbotWindow.style.display === 'flex' ? 'none' : 'flex';
});
chatbotClose.addEventListener('click', function() {
chatbotWindow.style.display = 'none';
});
function sendMessage() {
const message = chatInput.value.trim();
if (!message) return;
// Add user message
const userMessageElement = document.createElement('div');
userMessageElement.classList.add('chat-message', 'user-message');
userMessageElement.textContent = message;
chatbotMessages.appendChild(userMessageElement);
// Clear input
chatInput.value = '';
// Scroll to bottom
chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
// Simulate bot response after 1 second
setTimeout(function() {
const botResponses = [
"شكراً لتواصلك معنا! كيف يمكنني مساعدتك بخصوص خدماتنا؟",
"هل ترغب في معرفة المزيد عن نموذج SPEEDY وإمكانياته؟",
"يمكنني توصيلك بأحد خبرائنا لمناقشة احتياجاتك بشكل مفصل.",
"هل لديك أي استفسارات حول مشاريعنا أو خدماتنا؟",
"يمكنني تقديم معلومات مفصلة حول باقاتنا المختلفة وما تشمله من خدمات.",
"أنا هنا لمساعدتك! هل تود معرفة كيف يمكن لحلول الذكاء الاصطناعي تحسين أعمالك؟"
];
const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
const botMessageElement = document.createElement('div');
botMessageElement.classList.add('chat-message', 'bot-message');
botMessageElement.textContent = randomResponse;
chatbotMessages.appendChild(botMessageElement);
// Scroll to bottom
chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
}, 1000);
}
chatSend.addEventListener('click', sendMessage);
chatInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>