diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.css b/src/Components/BackgroundCanvas/BackgroundCanvas.css index b96339d..b69fc4e 100644 --- a/src/Components/BackgroundCanvas/BackgroundCanvas.css +++ b/src/Components/BackgroundCanvas/BackgroundCanvas.css @@ -63,7 +63,7 @@ main { z-index: 10 !important; min-height: 100vh !important; width: 100% !important; - padding: 20px !important; + /* padding: 20px !important; */ } nav.fixed { diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx index 3cda436..ff671f1 100644 --- a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx +++ b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx @@ -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'; } diff --git a/src/Components/Sections/About/About.css b/src/Components/Sections/About/About.css deleted file mode 100644 index c60ddee..0000000 --- a/src/Components/Sections/About/About.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/Components/Sections/About/About.jsx b/src/Components/Sections/About/About.jsx index b05b274..2dc7a8f 100644 --- a/src/Components/Sections/About/About.jsx +++ b/src/Components/Sections/About/About.jsx @@ -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' }) => { <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', diff --git a/src/Components/Sections/Contact/Contact.jsx b/src/Components/Sections/Contact/Contact.jsx index 085ebdf..355b3af 100644 --- a/src/Components/Sections/Contact/Contact.jsx +++ b/src/Components/Sections/Contact/Contact.jsx @@ -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"> diff --git a/src/Components/Sections/Services/Services.jsx b/src/Components/Sections/Services/Services.jsx index 5f64f29..f59d8d0 100644 --- a/src/Components/Sections/Services/Services.jsx +++ b/src/Components/Sections/Services/Services.jsx @@ -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; \ No newline at end of file