Added contact us
Added services
This commit is contained in:
Rahaf
@ -63,7 +63,7 @@ main {
|
||||
z-index: 10 !important;
|
||||
min-height: 100vh !important;
|
||||
width: 100% !important;
|
||||
padding: 20px !important;
|
||||
/* padding: 20px !important; */
|
||||
}
|
||||
|
||||
nav.fixed {
|
||||
|
||||
@ -64,11 +64,11 @@ const BackgroundCanvas = ({ theme = 'light' }) => {
|
||||
|
||||
let lineColor, pointColor, backgroundColor;
|
||||
if (theme === 'dark') {
|
||||
backgroundColor = '#000000';
|
||||
backgroundColor = '#446a85';
|
||||
lineColor = '#FFFFFF';
|
||||
pointColor = '#F5EEE6';
|
||||
} else {
|
||||
backgroundColor = '#FFFFFF';
|
||||
backgroundColor = '#d3dde3';
|
||||
lineColor = '#131313';
|
||||
pointColor = '#041c40';
|
||||
}
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
.grow-img {
|
||||
animation: growIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes growIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes soft-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-soft-blink {
|
||||
animation: soft-blink 3s infinite ease-in-out;
|
||||
}
|
||||
@ -70,7 +70,6 @@ const companyInfo = [
|
||||
}
|
||||
];
|
||||
|
||||
// Animations
|
||||
const rotating = keyframes`
|
||||
from {
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
|
||||
@ -140,7 +139,7 @@ const Card = styled.div.attrs(props => ({
|
||||
}
|
||||
}))`
|
||||
position: absolute;
|
||||
border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
|
||||
border: 2px solid ${props => props.$theme === 'dark' ? '#47718b' : '#47718b'};
|
||||
border-radius: 20px;
|
||||
overflow: visible;
|
||||
inset: 0;
|
||||
@ -148,15 +147,15 @@ const Card = styled.div.attrs(props => ({
|
||||
translateZ(var(--translateZ));
|
||||
cursor: pointer;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: ${props => props.$theme === 'dark' ? '#f5e7c673' : '#f5e7c673'};
|
||||
background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#3c4b5d, #57acd9)' : 'linear-gradient(45deg,white,#47718b)'};
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
|
||||
&:hover {
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(calc(var(--translateZ) + 80px)) scale(1.05);
|
||||
border-color: #e06923;
|
||||
background: ${props => props.$theme === 'dark' ? '#F7B980' : '#F7B980'};
|
||||
border-color: #47718b;
|
||||
// background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#57acd9, transpatent)' : '#063e5b'};
|
||||
box-shadow:
|
||||
0 0 30px rgba(4, 28, 64, 0.3),
|
||||
0 0 60px rgba(4, 28, 64, 0.2);
|
||||
@ -165,7 +164,7 @@ const Card = styled.div.attrs(props => ({
|
||||
${props => props.$isFront && `
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
|
||||
border-color:#e06923;
|
||||
border-color:#47718b;
|
||||
box-shadow:
|
||||
0 15px 35px rgba(4, 28, 64, 0.2),
|
||||
0 5px 15px rgba(4, 28, 64, 0.1);
|
||||
@ -213,7 +212,7 @@ const CardTitle = styled.h3`
|
||||
const CardDescription = styled.p`
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: ${props => props.$theme === 'dark' ? '#131313' : '#131313'};
|
||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||
margin-bottom: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
@ -310,7 +309,7 @@ const DetailModal = styled(motion.div)`
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(245 238 230 / 65%)'};
|
||||
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(49 49 49 / 75%)'};
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
z-index: 2000;
|
||||
@ -324,7 +323,7 @@ const ModalContent = styled(motion.div)`
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.9)' : 'rgba(245, 238, 230, 0.9)'};
|
||||
background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg, #063e5b, gray);' : 'linear-gradient(45deg,#539cc4, gray)'};
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
border-radius: 25px;
|
||||
@ -486,17 +485,7 @@ const About = ({ theme = 'light' }) => {
|
||||
<Title>
|
||||
<div
|
||||
className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
|
||||
style={{
|
||||
background: 'linear-gradient(90deg, #e06923 0%, #ffffff 33%, #313131 66%, #e06923 100%)',
|
||||
backgroundSize: '300% 100%',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
color: 'transparent',
|
||||
animation: 'gradientFlow 3s ease infinite',
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.5px'
|
||||
}}
|
||||
|
||||
>
|
||||
من نحن
|
||||
</div>
|
||||
@ -538,7 +527,7 @@ const About = ({ theme = 'light' }) => {
|
||||
<CardContent $theme={theme}>
|
||||
<CardHeader>
|
||||
<IconWrapper>
|
||||
<Icon size={32} style={{ color: '#e06923' }} />
|
||||
<Icon size={32} style={{ color: '#57acd9' }} />
|
||||
</IconWrapper>
|
||||
<CardTitle>{card.title}</CardTitle>
|
||||
<CardDescription $theme={theme}>
|
||||
@ -548,9 +537,9 @@ const About = ({ theme = 'light' }) => {
|
||||
|
||||
<div>
|
||||
{isFront && (
|
||||
<ArrowHint style={{ color: '#e06923' }}>
|
||||
<ArrowDown size={24} style={{ color: '#e06923' }} />
|
||||
<span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
|
||||
<ArrowHint style={{ color: '#57acd9' }}>
|
||||
<ArrowDown size={24} style={{ color: '#57acd9' }} />
|
||||
<span style={{ color: '#57acd9' }}>إضغط لعرض التفاصيل</span>
|
||||
</ArrowHint>
|
||||
)}
|
||||
</div>
|
||||
@ -660,11 +649,11 @@ const About = ({ theme = 'light' }) => {
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{idx === 1 && <Shield size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 0 && <Target size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 2 && <Globe size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 3 && <Zap size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 4 && <Sparkles size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 1 && <Shield size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 0 && <Target size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 2 && <Globe size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 3 && <Zap size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 4 && <Sparkles size={20} style={{ color: '#57acd9' }} />}
|
||||
</div>
|
||||
<span style={{
|
||||
color: theme === 'dark' ? '#F5EEE6' : '#131313',
|
||||
|
||||
@ -58,15 +58,15 @@ emailjs
|
||||
className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
// background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-10 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
<div className="absolute -top-10 -right-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#57acd9] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#57acd9]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
@ -78,7 +78,7 @@ emailjs
|
||||
>
|
||||
<h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#57acd9] via-blue-200 to-[#446a85]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
@ -102,115 +102,48 @@ emailjs
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="space-y-4 lg:w-1/2"
|
||||
>
|
||||
{/* بطاقة العنوان - بقيت كما هي */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-[#063e5b]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#23558f] to-[#3360b2] text-white shadow-lg"
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#57acd9] to-[#063e5b] text-white shadow-lg"
|
||||
>
|
||||
<FaMapMarkerAlt className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
<h3 className="text-[#516475] lg font-bold text- mb-2">
|
||||
{t("contact.address")}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed whitespace-pre-line">
|
||||
<p className="text-[#063e5b] text-sm leading-relaxed whitespace-pre-line">
|
||||
{t("contact.addressText")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#063e5b]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#57acd9] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* بطاقة البريد الإلكتروني - بقيت كما هي */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#3c5ee3] to-[#5c7ce3] text-white shadow-lg"
|
||||
>
|
||||
<FaPhoneAlt className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3">
|
||||
{t("contact.phone")}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
<span className="text-[#23558f] font-medium">0965656631</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#2ecc71] to-[#1abc9c] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaPhoneAlt className="text-sm" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
<a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
|
||||
>
|
||||
963965656631
|
||||
</a>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaWhatsapp className="text-sm" />
|
||||
</motion.a>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaPhoneAlt className="text-sm" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
@ -222,14 +155,14 @@ emailjs
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
<h3 className="text-lg font-bold text-[#063e5b] mb-2">
|
||||
{t("contact.email")}
|
||||
</h3>
|
||||
<a
|
||||
href="mailto:info@TPS-STATIONS.COM"
|
||||
href="mailto:info@rexnt.com"
|
||||
className="inline-block bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] text-[#23558f] font-medium rounded-xl px-4 py-3 hover:from-[#dceafe] hover:to-[#c6e2ff] hover:text-[#3c5ee3] hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
Info@TPS-STATIONS.COM
|
||||
Info@rexnt.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,6 +180,7 @@ emailjs
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ x: -50, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
@ -255,11 +189,11 @@ emailjs
|
||||
>
|
||||
<div className="relative mb-3 pt-3">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-center">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71]">
|
||||
<span className="bg-clip-text text-[#063e5b] bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
|
||||
{t("contact.formTitle")}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] rounded-full"></div>
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9] rounded-full"></div>
|
||||
</div>
|
||||
<form
|
||||
ref={form}
|
||||
@ -360,7 +294,7 @@ emailjs
|
||||
disabled={isLoading}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`group/btn relative w-full bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
|
||||
className={`group/btn relative w-full bg-gradient-to-r from-[#57acd9] via-[#063e5b] to-[#4a7c9b] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
|
||||
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||
}`}
|
||||
>
|
||||
@ -411,7 +345,7 @@ emailjs
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
|
||||
background: "linear-gradient(135deg, #4a7c9b 0%, #063e5b 33%, #57acd9 66%, #4a7c9b 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
|
||||
@ -1,656 +1,132 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
Globe,
|
||||
MessageSquare,
|
||||
Bell,
|
||||
Package,
|
||||
BarChart3,
|
||||
Zap,
|
||||
Shield,
|
||||
Users,
|
||||
Clock,
|
||||
CheckCircle
|
||||
} from "lucide-react";
|
||||
|
||||
const CARDS_PER_PAGE = 4;
|
||||
import React from "react";
|
||||
import { Wallet, Zap, Users, PieChart, ChevronRight, Sparkles } from "lucide-react";
|
||||
|
||||
const Services = () => {
|
||||
const { t, ready } = useTranslation();
|
||||
const servicesData = [
|
||||
const features = [
|
||||
{
|
||||
id: "service-1",
|
||||
title: t('tradesafe.services.platform.title'),
|
||||
description: t('tradesafe.services.platform.description'),
|
||||
details: t('tradesafe.services.platform.details'),
|
||||
icon: <Globe className="w-10 h-10" />,
|
||||
color: "from-[#23558f] to-[#3360b2]",
|
||||
bgColor: "bg-gradient-to-br from-[#23558f]/20 to-[#3360b2]/20",
|
||||
features: t('tradesafe.services.platform.features', { returnObjects: true })
|
||||
id: 1,
|
||||
icon: <Wallet className="w-8 h-8" />,
|
||||
title: "تصميم وتنفيذ خطوط إنتاج صناعية متكاملة",
|
||||
description: "تشمل قطاعات الحديد، الإسمنت، الغذائيات، الأدوية، والبلاستيك بأعلى معايير الجودة والسلامة",
|
||||
},
|
||||
{
|
||||
id: "service-2",
|
||||
title: t('tradesafe.services.orders.title'),
|
||||
description: t('tradesafe.services.orders.description'),
|
||||
details: t('tradesafe.services.orders.details'),
|
||||
icon: <Package className="w-10 h-10" />,
|
||||
color: "from-[#3360b2] to-[#3c5ee3]",
|
||||
bgColor: "bg-gradient-to-br from-[#3360b2]/20 to-[#3c5ee3]/20",
|
||||
features: t('tradesafe.services.orders.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-3",
|
||||
title: t('tradesafe.services.communication.title'),
|
||||
description: t('tradesafe.services.communication.description'),
|
||||
details: t('tradesafe.services.communication.details'),
|
||||
icon: <MessageSquare className="w-10 h-10" />,
|
||||
color: "from-[#3c5ee3] to-[#5c7ce3]",
|
||||
bgColor: "bg-gradient-to-br from-[#3c5ee3]/20 to-[#5c7ce3]/20",
|
||||
features: t('tradesafe.services.communication.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-4",
|
||||
title: t('tradesafe.services.notifications.title'),
|
||||
description: t('tradesafe.services.notifications.description'),
|
||||
details: t('tradesafe.services.notifications.details'),
|
||||
icon: <Bell className="w-10 h-10" />,
|
||||
color: "from-[#4a90e2] to-[#6aa8f2]",
|
||||
bgColor: "bg-gradient-to-br from-[#4a90e2]/20 to-[#6aa8f2]/20",
|
||||
features: t('tradesafe.services.notifications.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-5",
|
||||
title: t('tradesafe.services.dashboard.title'),
|
||||
description: t('tradesafe.services.dashboard.description'),
|
||||
details: t('tradesafe.services.dashboard.details'),
|
||||
icon: <BarChart3 className="w-10 h-10" />,
|
||||
color: "from-[#2ecc71] to-[#1abc9c]",
|
||||
bgColor: "bg-gradient-to-br from-[#2ecc71]/20 to-[#1abc9c]/20",
|
||||
features: t('tradesafe.services.dashboard.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-6",
|
||||
title: t('tradesafe.services.solutions.title'),
|
||||
description: t('tradesafe.services.solutions.description'),
|
||||
details: t('tradesafe.services.solutions.details'),
|
||||
icon: <Shield className="w-10 h-10" />,
|
||||
color: "from-[#9b59b6] to-[#8e44ad]",
|
||||
bgColor: "bg-gradient-to-br from-[#9b59b6]/20 to-[#8e44ad]/20",
|
||||
features: t('tradesafe.services.solutions.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-7",
|
||||
title: t('tradesafe.services.speed.title'),
|
||||
description: t('tradesafe.services.speed.description'),
|
||||
details: t('tradesafe.services.speed.details'),
|
||||
icon: <Zap className="w-10 h-10" />,
|
||||
color: "from-[#f39c12] to-[#e67e22]",
|
||||
bgColor: "bg-gradient-to-br from-[#f39c12]/20 to-[#e67e22]/20",
|
||||
features: t('tradesafe.services.speed.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-8",
|
||||
title: t('tradesafe.services.network.title'),
|
||||
description: t('tradesafe.services.network.description'),
|
||||
details: t('tradesafe.services.network.details'),
|
||||
icon: <Users className="w-10 h-10" />,
|
||||
color: "from-[#3498db] to-[#2980b9]",
|
||||
bgColor: "bg-gradient-to-br from-[#3498db]/20 to-[#2980b9]/20",
|
||||
features: t('tradesafe.services.network.features', { returnObjects: true })
|
||||
}
|
||||
];
|
||||
|
||||
const reasonsToChooseUs = [
|
||||
{
|
||||
id: 2,
|
||||
icon: <Zap className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.speed.text'),
|
||||
description: t('tradesafe.reasons.speed.description')
|
||||
title: "تنفيذ مشاريع سكنية وخدمية متكاملة",
|
||||
description: "وحدات سكنية مسبقة الصنع، مباني خدمية وإدارية، مع الالتزام بأعلى المعايير الهندسية",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.reliability.text'),
|
||||
description: t('tradesafe.reasons.reliability.description')
|
||||
id: 3,
|
||||
icon: <Users className="w-8 h-8" />,
|
||||
title: "إنشاء وصيانة مرافق البنية التحتية",
|
||||
description: "محطات الوقود، المنشآت النفطية، المحطات المائية، وأنظمة ضخ ومعالجة المياه",
|
||||
},
|
||||
{
|
||||
icon: <Globe className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.connection.text'),
|
||||
description: t('tradesafe.reasons.connection.description')
|
||||
id: 4,
|
||||
icon: <PieChart className="w-8 h-8" />,
|
||||
title: "تشغيل وصيانة متكاملة للمنشآت",
|
||||
description: "أنظمة أتمتة متقدمة، إدارة محطات، صيانة على مدار الساعة، وتطوير مستمر للمرافق",
|
||||
},
|
||||
{
|
||||
icon: <MessageSquare className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.communication.text'),
|
||||
description: t('tradesafe.reasons.communication.description')
|
||||
},
|
||||
{
|
||||
icon: <Clock className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.time.text'),
|
||||
description: t('tradesafe.reasons.time.description')
|
||||
},
|
||||
{
|
||||
icon: <CheckCircle className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.solutions.text'),
|
||||
description: t('tradesafe.reasons.solutions.description')
|
||||
}
|
||||
];
|
||||
|
||||
const [expandedCards, setExpandedCards] = useState({});
|
||||
const [hoveredCard, setHoveredCard] = useState(null);
|
||||
const [page, setPage] = useState(0);
|
||||
|
||||
const startIndex = page * CARDS_PER_PAGE;
|
||||
const endIndex = startIndex + CARDS_PER_PAGE;
|
||||
const visibleServices = servicesData.slice(startIndex, endIndex);
|
||||
const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
|
||||
|
||||
const toggleCard = (cardId) => {
|
||||
setExpandedCards(prev => ({
|
||||
...prev,
|
||||
[cardId]: !prev[cardId]
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleAllCards = () => {
|
||||
const allExpanded = Object.values(expandedCards).every(Boolean);
|
||||
const newState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newState[service.id] = !allExpanded;
|
||||
});
|
||||
setExpandedCards(newState);
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
setPage((prev) => (prev + 1) % totalPages);
|
||||
};
|
||||
|
||||
const handlePrevPage = () => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
setPage((prev) => (prev - 1 + totalPages) % totalPages);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = expandedCards[service.id] || false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
}, [page]);
|
||||
|
||||
const openPdfPresentation = () => {
|
||||
const pdfUrl = `${window.location.origin}/trader-safe.pdf`;
|
||||
window.open(pdfUrl, "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
const openPlatformLink = () => {
|
||||
const platformUrl = "http://45.93.137.91/";
|
||||
window.open(platformUrl, "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
if (!ready) return (
|
||||
<div className="flex justify-center items-center h-screen bg-gradient-to-br from-[#23558f] via-[#3360b2] to-[#3c5ee3]">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-white"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Element name="services">
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full min-h-screen py-12 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-8"
|
||||
>
|
||||
<h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
>
|
||||
{t('tradesafe.services.title')}
|
||||
</motion.span>
|
||||
</h1>
|
||||
<p className="text-lg font-medium text-gray-700 lg:text-xl mb-6 max-w-3xl mx-auto">
|
||||
{t('tradesafe.subtitle')}
|
||||
</p>
|
||||
<div className="flex justify-center mb-8">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={toggleAllCards}
|
||||
className="px-6 py-3 bg-gradient-to-r from-[#23558f] to-[#3c5ee3] text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2"
|
||||
>
|
||||
{Object.values(expandedCards).every(Boolean) ? (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
{t('tradesafe.buttons.collapseAll')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
{t('tradesafe.buttons.showDetails')}
|
||||
</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="w-full px-4 relative z-10">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<AnimatePresence>
|
||||
{visibleServices.map((service, index) => {
|
||||
const isExpanded = expandedCards[service.id] || false;
|
||||
const isHovered = hoveredCard === service.id;
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}}
|
||||
exit={{ scale: 0.9, opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
delay: index * 0.1,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
whileHover={{
|
||||
y: -5,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
onHoverStart={() => setHoveredCard(service.id)}
|
||||
onHoverEnd={() => setHoveredCard(null)}
|
||||
onClick={() => toggleCard(service.id)}
|
||||
className={`relative cursor-pointer transition-all duration-300 ease-in-out p-6 rounded-2xl shadow-lg backdrop-blur-sm bg-white/90 border-2 ${
|
||||
isExpanded
|
||||
? 'border-[#3c5ee3] shadow-xl'
|
||||
: 'border-white/20 hover:border-[#3c5ee3]/30'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 rounded-2xl ${service.bgColor} opacity-20`}></div>
|
||||
<div className="relative z-10 h-full flex flex-col">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`p-3 rounded-xl bg-gradient-to-br ${service.color} text-white shadow-lg`}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ rotate: isExpanded ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-6 h-6 text-gray-500"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
{service.description}
|
||||
</p>
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-4 border-t border-gray-200">
|
||||
<p className="text-gray-700 text-sm mb-3 leading-relaxed">
|
||||
{service.details}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.isArray(service.features) && service.features.map((feature, idx) => (
|
||||
<motion.span
|
||||
key={idx}
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
className="px-3 py-1 bg-gradient-to-r from-white to-gray-50 text-[#23558f] text-xs font-medium rounded-full border border-[#23558f]/20 shadow-sm"
|
||||
>
|
||||
{feature}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{!isExpanded && isHovered && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-3 border-t border-dashed border-gray-300 mt-3">
|
||||
<p className="text-gray-700 text-xs mb-2 line-clamp-2">
|
||||
{service.details.split(' - ')[0]}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Array.isArray(service.features) && service.features.slice(0, 2).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-gradient-to-r from-[#dceafe] to-[#e8f4ff] text-[#23558f] text-xs font-medium rounded-full"
|
||||
>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
{isHovered && !isExpanded && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/5 to-transparent"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
/>
|
||||
)}
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/10 to-transparent"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="flex justify-center items-center gap-6 mt-12">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, x: -5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handlePrevPage}
|
||||
className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
<div className="flex gap-3">
|
||||
{Array.from({ length: totalPages }).map((_, idx) => (
|
||||
<motion.button
|
||||
key={idx}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
setPage(idx);
|
||||
}}
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${
|
||||
page === idx
|
||||
? 'bg-gradient-to-r from-[#3c5ee3] to-[#2ecc71] text-white shadow-lg scale-110'
|
||||
: 'bg-white/80 text-gray-600 hover:bg-white'
|
||||
}`}
|
||||
>
|
||||
{idx + 1}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, x: 5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handleNextPage}
|
||||
className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
</div>
|
||||
<div className="text-center mt-4">
|
||||
<span className="text-gray-600 font-medium">
|
||||
{t('tradesafe.buttons.page', { current: page + 1, total: totalPages })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</Element>
|
||||
|
||||
<Element name="why-us">
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="w-full py-16 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-white/90"></div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
<motion.h1
|
||||
initial={{ y: -30, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="pt-6 mb-12 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center"
|
||||
>
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
<div className="min-h-screen bg-transparent font-sans overflow-hidden relative">
|
||||
<div className="absolute inset-0 z-0 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center">
|
||||
<div className=" flex flex-col justify-center max-h-screen ">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 max-w-4xl mx-auto p-6">
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className="group relative overflow-hidden"
|
||||
>
|
||||
{t('tradesafe.reasons.title')}
|
||||
</motion.span>
|
||||
</motion.h1>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||
{reasonsToChooseUs.map((reason, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ y: 50, opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ y: 0, opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.1,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
whileHover={{
|
||||
y: -8,
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`p-3 rounded-xl bg-gradient-to-br ${
|
||||
index % 3 === 0 ? 'from-[#23558f] to-[#3360b2]' :
|
||||
index % 3 === 1 ? 'from-[#3c5ee3] to-[#5c7ce3]' :
|
||||
'from-[#2ecc71] to-[#1abc9c]'
|
||||
} text-white shadow-lg`}
|
||||
>
|
||||
{reason.icon}
|
||||
</motion.div>
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
|
||||
|
||||
<div className="relative p-6 z-10">
|
||||
<div className="flex items-start space-x-5">
|
||||
<div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
{reason.text}
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-[#47718b] transition-colors duration-500">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{reason.description}
|
||||
<p className="text-gray-600 leading-relaxed text-sm">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 30 }}
|
||||
whileInView={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
{t('tradesafe.reasons.cta.title')}
|
||||
</h3>
|
||||
<p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
|
||||
{t('tradesafe.reasons.cta.subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<motion.button
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 10px 25px rgba(0,0,0,0.2)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={openPlatformLink}
|
||||
className="px-8 py-3 bg-white text-[#23558f] font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
{t('tradesafe.buttons.startNow')}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 10px 25px rgba(255,255,255,0.2)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={openPdfPresentation}
|
||||
className="px-8 py-3 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
{t('tradesafe.buttons.viewPresentation')}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
</Element>
|
||||
</>
|
||||
</div>
|
||||
<div className="relative lg:w-1/2 lg:min-h-screen flex items-center justify-center py-16 lg:py-0">
|
||||
<div className="absolute inset-0 lg:inset-y-0 lg:right-0 lg:left-auto lg:w-[100%]">
|
||||
<div className="absolute inset-0">
|
||||
<div className="hidden lg:block absolute inset-0">
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
|
||||
style={{
|
||||
clipPath: 'circle(150% at 0% 50%)',
|
||||
borderTopLeftRadius: '0',
|
||||
borderBottomLeftRadius: '0',
|
||||
borderTopRightRadius: '9999px',
|
||||
borderBottomRightRadius: '9999px'
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:hidden absolute inset-0">
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
|
||||
style={{
|
||||
clipPath: 'ellipse(150% 100% at 50% 0%)',
|
||||
borderBottomLeftRadius: '9999px',
|
||||
borderBottomRightRadius: '9999px'
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/10 via-transparent to-white/5"></div>
|
||||
<div className="absolute inset-0 border-2 border-white/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute top-1/4 -left-16 w-64 h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
|
||||
<div className="absolute bottom-1/3 -left-8 w-48 h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
|
||||
<div className="absolute top-1/2 right-1/4 w-32 h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto">
|
||||
<div className="space-y-8 lg:space-y-10">
|
||||
<div className="relative">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<span className="text-sm font-semibold tracking-widest text-white" >خلاصة أعمالنا </span>
|
||||
<Sparkles className="w-6 h-6 text-[#57acd9]" />
|
||||
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]">
|
||||
خدماتنا
|
||||
</h1>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl">
|
||||
خبرات تراكمية واسعة في تنفيذ المشاريع الصناعية والإنشائية
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-white to[#57acd9] rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-lg">
|
||||
تنفيذ مشاريع متكاملة مع الشركاء بأعلى معايير الجودة والسلامة
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
export default Services;
|
||||
Reference in New Issue
Block a user