Added services, Why TradeSafe? and contact pages with translation it .
This commit is contained in:
Rahaf
BIN
public/trader-safe.pdf
Normal file
BIN
public/trader-safe.pdf
Normal file
Binary file not shown.
@ -4,22 +4,23 @@ import {
|
|||||||
FaPhoneAlt,
|
FaPhoneAlt,
|
||||||
FaEnvelope,
|
FaEnvelope,
|
||||||
FaWhatsapp,
|
FaWhatsapp,
|
||||||
|
FaPaperPlane,
|
||||||
} from "react-icons/fa";
|
} from "react-icons/fa";
|
||||||
import emailjs from "@emailjs/browser";
|
import emailjs from "@emailjs/browser";
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
const Contact = () => {
|
const Contact = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const form = useRef();
|
const form = useRef();
|
||||||
const [message, setMessage] = useState({ text: "", type: "" });
|
const [message, setMessage] = useState({ text: "", type: "" });
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|
||||||
const sendEmail = (e) => {
|
const sendEmail = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setMessage({ text: "", type: "" });
|
setMessage({ text: "", type: "" });
|
||||||
|
emailjs
|
||||||
emailjs
|
|
||||||
.sendForm(
|
.sendForm(
|
||||||
"service_dynf5hg",
|
"service_dynf5hg",
|
||||||
"template_l4ik4he",
|
"template_l4ik4he",
|
||||||
@ -28,18 +29,17 @@ const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|||||||
)
|
)
|
||||||
.then(
|
.then(
|
||||||
(result) => {
|
(result) => {
|
||||||
console.log("✅ Message sent:", result.text);
|
console.log("Message sent:", result.text);
|
||||||
setMessage({
|
setMessage({
|
||||||
text: t("contact.successMessage") || "Message sent successfully!",
|
text: t("contact.successMessage") || "Message sent successfully!",
|
||||||
type: "success",
|
type: "success",
|
||||||
});
|
});
|
||||||
form.current.reset();
|
form.current.reset();
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
// Clear message after 5 seconds
|
|
||||||
setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.error("❌ Failed to send message:", error.text);
|
console.error("Failed to send message:", error.text);
|
||||||
setMessage({
|
setMessage({
|
||||||
text:
|
text:
|
||||||
t("contact.errorMessage") ||
|
t("contact.errorMessage") ||
|
||||||
@ -47,154 +47,227 @@ const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|||||||
type: "error",
|
type: "error",
|
||||||
});
|
});
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
// Clear message after 5 seconds
|
|
||||||
setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="contact" className="relative min-h-screen">
|
<section
|
||||||
<div className="absolute inset-0">
|
id="contact"
|
||||||
<img
|
className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
|
||||||
src={Background}
|
style={{
|
||||||
alt="Contact Background"
|
direction: "rtl",
|
||||||
className="w-full h-full object-cover"
|
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||||
loading="eager"
|
}}
|
||||||
fetchPriority="high"
|
>
|
||||||
/>
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
<div className="absolute inset-0 bg-[#10375C]/65 mix-blend-multiply"></div>
|
<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 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative z-10 px-4 py-10 md:px-20 text-white">
|
|
||||||
<h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
|
|
||||||
<span
|
|
||||||
className="text-transparent bg-clip-text"
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"linear-gradient(to right, #10375C 0%, #F3C623 40%, #F3C623 100%)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("contact.title")}
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className="text-center text-lg md:text-xl max-w-3xl mx-auto text-[#D1D5DB] leading-relaxed mb-12">
|
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||||
{t("contact.subtitle")}
|
<motion.div
|
||||||
</p>
|
initial={{ y: -50, opacity: 0 }}
|
||||||
<div className="flex flex-col md:flex-row-reverse gap-10 items-start">
|
animate={{ y: 0, opacity: 1 }}
|
||||||
{/* Enhanced Contact Information Section */}
|
transition={{ duration: 0.8 }}
|
||||||
<div className="space-y-6 text-right md:w-1/2">
|
className="text-center mb-12"
|
||||||
{/* Address Card */}
|
>
|
||||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
|
<h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
|
||||||
<div className="flex flex-row-reverse items-start gap-6">
|
<motion.span
|
||||||
<div className="relative">
|
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
animate={{
|
||||||
<FaMapMarkerAlt className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
|
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||||
</div>
|
}}
|
||||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
transition={{
|
||||||
</div>
|
duration: 5,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "linear"
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
backgroundSize: "200% 100%"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("contact.title")}
|
||||||
|
</motion.span>
|
||||||
|
</h1>
|
||||||
|
</motion.div>
|
||||||
|
<div className="flex flex-col lg:flex-row-reverse gap-8 items-start">
|
||||||
|
<motion.div
|
||||||
|
initial={{ x: 50, opacity: 0 }}
|
||||||
|
animate={{ x: 0, opacity: 1 }}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<FaMapMarkerAlt className="text-2xl" />
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h3 className="text-xl font-bold text-[#F3C623] mb-2 group-hover:text-white transition-colors duration-300">
|
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||||
{t("contact.address")}
|
{t("contact.address")}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-[#D1D5DB] leading-relaxed group-hover:text-white transition-colors duration-300">
|
<p className="text-gray-600 text-sm leading-relaxed whitespace-pre-line">
|
||||||
{t("contact.addressText")}
|
{t("contact.addressText")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<motion.div
|
||||||
{/* Phone Card */}
|
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"
|
||||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
|
initial={false}
|
||||||
<div className="flex flex-row-reverse items-start gap-6">
|
/>
|
||||||
<div className="relative">
|
<motion.div
|
||||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
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"
|
||||||
<FaPhoneAlt className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
|
initial={{ x: "-50%", width: "0%" }}
|
||||||
</div>
|
whileHover={{ width: "75%" }}
|
||||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
transition={{ duration: 0.3 }}
|
||||||
</div>
|
/>
|
||||||
|
</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">
|
<div className="flex-1">
|
||||||
<h3 className="text-xl font-bold text-[#F3C623] mb-3 group-hover:text-white transition-colors duration-300">
|
<h3 className="text-lg font-bold text-gray-800 mb-3">
|
||||||
{t("contact.phone")}
|
{t("contact.phone")}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center gap-3 justify-end bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300">
|
<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-white font-medium tracking-wide">
|
<span className="text-[#23558f] font-medium">0965656631</span>
|
||||||
0965656631
|
|
||||||
</span>
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaPhoneAlt
|
<motion.button
|
||||||
className="text-[#F3C623] text-lg hover:scale-125 transition-transform duration-300 cursor-pointer"
|
whileHover={{ scale: 1.1 }}
|
||||||
title="اتصال"
|
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>
|
</div>
|
||||||
<div className="flex items-center gap-3 justify-end bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300">
|
|
||||||
{/* <FaWhatsapp className="text-xl" /> */}
|
<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
|
<a
|
||||||
href="https://wa.me/963965656631"
|
href="https://wa.me/963965656631"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
|
||||||
>
|
>
|
||||||
<span>963965656631</span>
|
963965656631
|
||||||
</a>
|
</a>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaWhatsapp
|
<motion.a
|
||||||
className="text-green-400 text-xl hover:scale-125 transition-transform duration-300 cursor-pointer"
|
href="https://wa.me/963965656631"
|
||||||
title="واتساب"
|
target="_blank"
|
||||||
/>
|
rel="noopener noreferrer"
|
||||||
<FaPhoneAlt
|
whileHover={{ scale: 1.1 }}
|
||||||
className="text-[#F3C623] text-lg hover:scale-125 transition-transform duration-300 cursor-pointer"
|
whileTap={{ scale: 0.9 }}
|
||||||
title="اتصال"
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<motion.div
|
||||||
{/* Email Card */}
|
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"
|
||||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
|
initial={false}
|
||||||
<div className="flex flex-row-reverse items-start gap-6">
|
/>
|
||||||
<div className="relative">
|
</motion.div>
|
||||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
<motion.div
|
||||||
<FaEnvelope className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
|
whileHover={{ y: -5, scale: 1.02 }}
|
||||||
</div>
|
transition={{ duration: 0.3 }}
|
||||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
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>
|
>
|
||||||
|
<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-[#2ecc71] to-[#1abc9c] text-white shadow-lg"
|
||||||
|
>
|
||||||
|
<FaEnvelope className="text-2xl" />
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h3 className="text-xl font-bold text-[#F3C623] mb-2 group-hover:text-white transition-colors duration-300">
|
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||||
{t("contact.email")}
|
{t("contact.email")}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-white font-medium bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300 cursor-pointer hover:text-[#F3C623]">
|
<a
|
||||||
<a href="mailto:info@TPS-STATIONS.COM">
|
href="mailto:info@TPS-STATIONS.COM"
|
||||||
<span>Info@TPS-STATIONS.COM</span>
|
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"
|
||||||
</a>
|
>
|
||||||
</p>
|
Info@TPS-STATIONS.COM
|
||||||
|
</a>
|
||||||
</div>
|
</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"
|
||||||
{/* Contact Form - keeping existing styling */}
|
initial={false}
|
||||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm text-white p-8 rounded-2xl shadow-2xl border border-[#F3C623]/30 hover:border-[#F3C623]/60 md:w-1/2 w-full min-h-[450px] hover:shadow-[0px_20px_50px_rgba(243,198,35,0.2)] transition-all duration-500 hover:scale-[1.02]">
|
/>
|
||||||
<div className="relative">
|
|
||||||
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-[#F3C623] to-[#EB8317] leading-snug">
|
<motion.div
|
||||||
{t("contact.formTitle")}
|
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#2ecc71] to-transparent rounded-full"
|
||||||
|
initial={{ x: "-50%", width: "0%" }}
|
||||||
|
whileHover={{ width: "75%" }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ x: -50, opacity: 0 }}
|
||||||
|
animate={{ x: 0, opacity: 1 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-2xl border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-3xl transition-all duration-500 lg:w-1/2"
|
||||||
|
>
|
||||||
|
<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]">
|
||||||
|
{t("contact.formTitle")}
|
||||||
|
</span>
|
||||||
</h2>
|
</h2>
|
||||||
<div className="absolute -top-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r from-[#F3C623] to-[#EB8317] rounded-full"></div>
|
<div 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>
|
</div>
|
||||||
|
|
||||||
<form
|
<form
|
||||||
ref={form}
|
ref={form}
|
||||||
onSubmit={sendEmail}
|
onSubmit={sendEmail}
|
||||||
className="space-y-5 text-right"
|
className="space-y-2"
|
||||||
>
|
>
|
||||||
{/* Name Field */}
|
|
||||||
<div className="group/field">
|
<div className="group/field">
|
||||||
<label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
|
<label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||||
{t("contact.name")}
|
{t("contact.name")}
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
@ -202,16 +275,14 @@ const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|||||||
type="text"
|
type="text"
|
||||||
name="user_name"
|
name="user_name"
|
||||||
required
|
required
|
||||||
className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
|
className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
|
||||||
placeholder={t("contact.nameePlaceholder")}
|
placeholder={t("contact.namePlaceholder")}
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Email Field */}
|
|
||||||
<div className="group/field">
|
<div className="group/field">
|
||||||
<label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
|
<label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||||
{t("contact.email")}
|
{t("contact.email")}
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
@ -219,38 +290,35 @@ const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|||||||
type="email"
|
type="email"
|
||||||
name="user_email"
|
name="user_email"
|
||||||
required
|
required
|
||||||
className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
|
className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
|
||||||
placeholder={t("contact.emailPlaceholder")}
|
placeholder={t("contact.emailPlaceholder")}
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Message Field */}
|
|
||||||
<div className="group/field">
|
<div className="group/field">
|
||||||
<label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
|
<label className="block mb-2 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||||
{t("contact.message")}
|
{t("contact.message")}
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<textarea
|
<textarea
|
||||||
name="user_message"
|
name="user_message"
|
||||||
required
|
required
|
||||||
className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl resize-none bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
|
className="w-full border-2 border-gray-200 p-4 rounded-xl resize-none bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10 min-h-[120px]"
|
||||||
rows="4"
|
|
||||||
placeholder={t("contact.messagePlaceholder")}
|
placeholder={t("contact.messagePlaceholder")}
|
||||||
></textarea>
|
></textarea>
|
||||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Success/Error Message */}
|
|
||||||
{message.text && (
|
{message.text && (
|
||||||
<div
|
<motion.div
|
||||||
className={`p-4 rounded-xl text-center font-medium transition-all duration-500 transform ${
|
initial={{ scale: 0.9, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
className={`p-4 rounded-xl text-center font-medium transition-all duration-500 ${
|
||||||
message.type === "success"
|
message.type === "success"
|
||||||
? "bg-green-500/20 border border-green-400/50 text-green-300 shadow-lg shadow-green-500/20"
|
? "bg-gradient-to-r from-[#2ecc71]/20 to-[#1abc9c]/20 border border-[#2ecc71]/50 text-[#2ecc71] shadow-lg shadow-[#2ecc71]/20"
|
||||||
: "bg-red-500/20 border border-red-400/50 text-red-300 shadow-lg shadow-red-500/20"
|
: "bg-gradient-to-r from-[#e74c3c]/20 to-[#c0392b]/20 border border-[#e74c3c]/50 text-[#e74c3c] shadow-lg shadow-[#e74c3c]/20"
|
||||||
} animate-pulse`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
{message.type === "success" ? (
|
{message.type === "success" ? (
|
||||||
@ -284,15 +352,15 @@ const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|||||||
)}
|
)}
|
||||||
{message.text}
|
{message.text}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Submit Button */}
|
|
||||||
<div className="pt-2">
|
<div className="pt-2">
|
||||||
<button
|
<motion.button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className={`group/btn relative w-full bg-gradient-to-r from-[#EB8317] to-[#F3C623] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:from-[#F3C623] hover:to-[#EB8317] transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-[#F3C623]/30 active:scale-95 overflow-hidden ${
|
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 ${
|
||||||
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@ -318,38 +386,63 @@ const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
|||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
Sending...
|
{t("contact.send")}...
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{t("contact.send")}
|
{t("contact.send")}
|
||||||
<svg
|
<FaPaperPlane className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300" />
|
||||||
className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
{!isLoading && (
|
{!isLoading && (
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
|
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
|
||||||
)}
|
)}
|
||||||
</button>
|
</motion.button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-[#23558f]/10 to-[#3360b2]/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
||||||
|
<div className="absolute bottom-0 left-0 w-16 h-16 bg-gradient-to-br from-[#2ecc71]/10 to-[#1abc9c]/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
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%)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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-xl md:text-2xl font-bold text-white mb-4">
|
||||||
|
{t('contact.contactSection.title')}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
|
||||||
|
{t('contact.contactSection.description')}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap justify-center gap-4">
|
||||||
|
{t('contact.contactSection.badges', { returnObjects: true }).map((badge, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
whileHover={{ scale: 1.05, y: -2 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
className="px-4 py-2 bg-white/20 rounded-full text-white text-sm font-medium backdrop-blur-sm hover:bg-white/30 transition-all duration-300 cursor-pointer"
|
||||||
|
>
|
||||||
|
{badge}
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Contact;
|
export default Contact;
|
||||||
File diff suppressed because it is too large
Load Diff
934
src/i18n.js
934
src/i18n.js
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user