Added contact us
Added services
This commit is contained in:
Rahaf
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user