From 4bedf7b193542823679f59d24e7064b2d6c07461 Mon Sep 17 00:00:00 2001 From: Rahaf Date: Fri, 9 Jan 2026 19:24:08 +0300 Subject: [PATCH 1/3] Added contact us Added services --- .../BackgroundCanvas/BackgroundCanvas.css | 2 +- .../BackgroundCanvas/BackgroundCanvas.jsx | 4 +- src/Components/Sections/About/About.css | 30 - src/Components/Sections/About/About.jsx | 47 +- src/Components/Sections/Contact/Contact.jsx | 114 +-- src/Components/Sections/Services/Services.jsx | 736 +++--------------- 6 files changed, 151 insertions(+), 782 deletions(-) delete mode 100644 src/Components/Sections/About/About.css 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 From bb709c452312dedea8c4522964bc4e31c5f0fa0c Mon Sep 17 00:00:00 2001 From: Rahaf <User@DESKTOP-JSF2AL8> Date: Fri, 9 Jan 2026 20:38:10 +0300 Subject: [PATCH 2/3] merge --- package-lock.json | 324 ++++++++++------------------------------------ package.json | 4 +- 2 files changed, 68 insertions(+), 260 deletions(-) diff --git a/package-lock.json b/package-lock.json index c75eb3d..1c8472f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,9 @@ "@emailjs/browser": "^4.4.1", "@heroicons/react": "^2.2.0", "aos": "^2.3.4", + "clsx": "^2.1.1", "flowbite": "^4.0.1", "flowbite-react": "^0.12.16", - "clsx": "^2.1.1", "framer-motion": "^12.23.26", "i18next": "^25.7.3", "i18next-browser-languagedetector": "^8.2.0", @@ -22,7 +22,7 @@ "react-dom": "^19.2.0", "react-i18next": "^16.5.0", "react-icons": "^5.5.0", - "react-router-dom": "^7.11.0", + "react-router-dom": "^7.12.0", "react-scroll": "^1.9.3", "styled-components": "^6.1.19", "tailwind-merge": "^3.4.0", @@ -88,7 +88,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -358,9 +357,6 @@ "node": ">=14.0.0" } }, - - - "node_modules/@emotion/is-prop-valid": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", @@ -475,7 +471,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -493,7 +488,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -511,7 +505,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -529,7 +522,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -547,7 +539,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -565,7 +556,6 @@ "ia32" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -583,7 +573,6 @@ "loong64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -601,7 +590,6 @@ "mips64el" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -619,7 +607,6 @@ "ppc64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -637,7 +624,6 @@ "riscv64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -655,7 +641,6 @@ "s390x" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -673,7 +658,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -691,7 +675,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -709,7 +692,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -727,7 +709,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -745,7 +726,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -763,7 +743,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -781,7 +760,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -799,7 +777,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -817,7 +794,6 @@ "ia32" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -835,7 +811,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1064,15 +1039,6 @@ "react": ">= 16 || ^19.0.0-rc" } }, - "node_modules/@heroicons/react": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", - "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", - "license": "MIT", - "peerDependencies": { - "react": ">= 16 || ^19.0.0-rc" - } - }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1135,7 +1101,6 @@ "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", @@ -1146,7 +1111,6 @@ "version": "2.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", @@ -1157,7 +1121,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1167,14 +1130,12 @@ "version": "1.5.5", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.31", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1287,7 +1248,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1302,7 +1262,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1317,7 +1276,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1332,7 +1290,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1347,7 +1304,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1362,7 +1318,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1377,7 +1332,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1392,7 +1346,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1407,7 +1360,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1422,7 +1374,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1437,7 +1388,6 @@ "loong64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1452,7 +1402,6 @@ "ppc64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1467,7 +1416,6 @@ "riscv64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1482,7 +1430,6 @@ "riscv64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1497,7 +1444,6 @@ "s390x" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1512,7 +1458,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1527,7 +1472,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1542,7 +1486,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1557,7 +1500,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1572,7 +1514,6 @@ "ia32" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1587,7 +1528,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1602,7 +1542,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1926,7 +1865,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", - "dev": true, "license": "MIT" }, "node_modules/@types/json-schema": { @@ -1942,7 +1880,6 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -2100,12 +2037,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@types/stylis": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", - "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", - "license": "MIT" - }, "node_modules/@vitejs/plugin-react": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz", @@ -2133,7 +2064,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2365,7 +2295,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2408,15 +2337,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001761", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz", @@ -2623,26 +2543,6 @@ "postcss-value-parser": "^4.0.2" } }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "license": "ISC", - "engines": { - "node": ">=4" - } - }, - "node_modules/css-to-react-native": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", - "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", - "license": "MIT", - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -2720,10 +2620,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", - "dev": true, "license": "Apache-2.0", - "optional": true, - "peer": true, "engines": { "node": ">=8" } @@ -2747,12 +2644,24 @@ "dev": true, "license": "ISC" }, + "node_modules/enhanced-resolve": { + "version": "5.18.4", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz", + "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/esbuild": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", "dev": true, - "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -2819,7 +2728,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3078,7 +2986,6 @@ "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", - "dev": true, "license": "MIT", "engines": { "node": ">=12.0.0" @@ -3287,7 +3194,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -3342,6 +3248,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "license": "ISC" + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -3409,7 +3321,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.28.4" }, @@ -3542,10 +3453,7 @@ "version": "2.6.1", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", - "dev": true, "license": "MIT", - "optional": true, - "peer": true, "bin": { "jiti": "lib/jiti-cli.mjs" } @@ -3653,10 +3561,7 @@ "version": "1.30.2", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz", "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==", - "dev": true, "license": "MPL-2.0", - "optional": true, - "peer": true, "dependencies": { "detect-libc": "^2.0.3" }, @@ -3688,13 +3593,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "android" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3710,13 +3613,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "darwin" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3732,13 +3633,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "darwin" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3754,13 +3653,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3776,13 +3673,11 @@ "cpu": [ "arm" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3798,13 +3693,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3820,13 +3713,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3842,13 +3733,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3864,13 +3753,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3886,13 +3773,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "win32" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3908,13 +3793,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "win32" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -4004,6 +3887,15 @@ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -4256,7 +4148,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -4287,7 +4178,6 @@ "version": "8.5.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -4303,7 +4193,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -4502,7 +4391,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4512,7 +4400,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4573,9 +4460,9 @@ } }, "node_modules/react-router": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz", - "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz", + "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -4595,12 +4482,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz", - "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz", + "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==", "license": "MIT", "dependencies": { - "react-router": "7.11.0" + "react-router": "7.12.0" }, "engines": { "node": ">=20.0.0" @@ -4718,9 +4605,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz", "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==", "devOptional": true, - "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -4808,12 +4693,6 @@ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", "license": "MIT" }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "license": "MIT" - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4942,80 +4821,6 @@ "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", "license": "MIT" }, - "node_modules/styled-components": { - "version": "6.1.19", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz", - "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==", - "license": "MIT", - "dependencies": { - "@emotion/is-prop-valid": "1.2.2", - "@emotion/unitless": "0.8.1", - "@types/stylis": "4.2.5", - "css-to-react-native": "3.2.0", - "csstype": "3.1.3", - "postcss": "8.4.49", - "shallowequal": "1.1.0", - "stylis": "4.3.2", - "tslib": "2.6.2" - }, - "engines": { - "node": ">= 16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0" - } - }, - "node_modules/styled-components/node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT" - }, - "node_modules/styled-components/node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.1.1", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/styled-components/node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "license": "0BSD" - }, - "node_modules/stylis": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", - "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", - "license": "MIT" - }, "node_modules/sucrase": { "version": "3.35.1", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", @@ -5069,6 +4874,16 @@ "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==", "license": "MIT" }, + "node_modules/tailwind-merge": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", + "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwind-merge-v2": { "name": "tailwind-merge", "version": "2.6.0", @@ -5091,26 +4906,11 @@ "url": "https://github.com/sponsors/dcastil" } }, - "node_modules/tailwind-merge": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", - "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/dcastil" - } - }, "node_modules/tailwindcss": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", - "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", - "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -5152,6 +4952,19 @@ "jiti": "bin/jiti.js" } }, + "node_modules/tapable": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", + "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/thenify": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", @@ -5173,23 +4986,22 @@ "node": ">=0.8" } }, - "node_modules/tiny-invariant": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", - "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "license": "MIT" - }, "node_modules/three": { "version": "0.182.0", "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz", "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==", "license": "MIT" }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.15", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", - "dev": true, "license": "MIT", "dependencies": { "fdir": "^6.5.0", @@ -5341,9 +5153,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz", "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "dev": true, - "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -5459,7 +5269,6 @@ "version": "2.8.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "dev": true, "license": "ISC", "bin": { "yaml": "bin.mjs" @@ -5490,7 +5299,6 @@ "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 5520116..7c71391 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "@emailjs/browser": "^4.4.1", "@heroicons/react": "^2.2.0", "aos": "^2.3.4", + "clsx": "^2.1.1", "flowbite": "^4.0.1", "flowbite-react": "^0.12.16", - "clsx": "^2.1.1", "framer-motion": "^12.23.26", "i18next": "^25.7.3", "i18next-browser-languagedetector": "^8.2.0", @@ -24,7 +24,7 @@ "react-dom": "^19.2.0", "react-i18next": "^16.5.0", "react-icons": "^5.5.0", - "react-router-dom": "^7.11.0", + "react-router-dom": "^7.12.0", "react-scroll": "^1.9.3", "styled-components": "^6.1.19", "tailwind-merge": "^3.4.0", From 25296759642c67c88ef42e5b9995f3d9b13a815b Mon Sep 17 00:00:00 2001 From: Rahaf <User@DESKTOP-JSF2AL8> Date: Fri, 9 Jan 2026 21:47:45 +0300 Subject: [PATCH 3/3] Merge --- src/App.jsx | 182 ++++- src/Components/ImagePreloader.jsx | 566 +++++++------- src/Components/Nav/Navbar.jsx | 793 ++++++++++++++++++-- src/Components/Sections/Contact/Contact.jsx | 452 +++++++++++ 4 files changed, 1623 insertions(+), 370 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4f363b5..13faf51 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,94 @@ -import React from "react"; +// import React from "react"; +// import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; +// import { AnimatePresence, LayoutGroup } from "framer-motion"; + +// import "./i18n"; +// import "./App.css"; + +// import Navbar from "./Components/Nav/Navbar"; +// import Home from "./Components/Sections/Home/Home"; +// import Services from "./Components/Sections/Services/Services"; +// import About from "./Components/Sections/About/About"; +// import Departments from "./Components/Sections/Departments/Departments"; +// import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail"; +// import Contact from "./Components/Sections/Contact/Contact"; +// import Footer from "./Components/Nav/Footer"; +// import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2"; + +// const MainPage = () => { +// return ( +// <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300"> +// <div className="flex flex-col min-h-screen"> +// <main className="flex-grow"> +// <Home /> +// <Services /> +// <About /> +// <Departments /> +// <Contact /> +// </main> +// <Footer /> +// </div> +// </div> +// ); +// }; + +// function RouterView() { +// const location = useLocation(); + +// return ( +// <LayoutGroup> +// <AnimatePresence mode="wait" initial={false}> +// <Routes location={location} key={location.pathname}> +// <Route path="/" element={<MainPage />} /> +// <Route path="/departments/:id" element={<DepartmentDetail />} /> +// <Route path="/department-detail2" element={<DepartmentDetail2 />} /> +// </Routes> +// </AnimatePresence> +// </LayoutGroup> +// ); +// } + +// function Layout() { +// const location = useLocation(); + +// const excludedExactPaths = [ +// "/department-detail2", +// ]; + +// const excludedPrefixes = ["/departments/"]; + +// const isExcludedExact = excludedExactPaths.includes(location.pathname); +// const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p)); + +// const hideNavbar = isExcludedExact || isExcludedPrefix; + +// const navbarHeight = hideNavbar ? 0 : 56; + +// return ( +// <> +// {!hideNavbar && <Navbar />} + +// <div style={{ paddingTop: navbarHeight }}> +// <RouterView /> +// </div> +// </> +// ); +// } + +// const App = () => { +// return ( +// <BrowserRouter> +// <Layout /> +// </BrowserRouter> +// ); +// }; + +// export default App; + + + + +import React, { useState, useEffect } from "react"; import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; import { AnimatePresence, LayoutGroup } from "framer-motion"; @@ -14,32 +104,45 @@ import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentD import Contact from "./Components/Sections/Contact/Contact"; import Footer from "./Components/Nav/Footer"; import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2"; +import ImagePreloader from "./Components/ImagePreloader"; +import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas"; -const MainPage = () => { +// المكون الرئيسي الذي يظهر في الصفحة الرئيسية +const MainPage = ({ theme }) => { return ( - <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300"> + <div className="min-h-screen bg-transparent"> <div className="flex flex-col min-h-screen"> <main className="flex-grow"> <Home /> <Services /> - <About /> + <About theme={theme} /> <Departments /> <Contact /> </main> - <Footer /> </div> </div> ); }; -function RouterView() { +// مكون الراوتر الداخلي +function RouterView({ theme, toggleTheme }) { const location = useLocation(); return ( <LayoutGroup> <AnimatePresence mode="wait" initial={false}> <Routes location={location} key={location.pathname}> - <Route path="/" element={<MainPage />} /> + <Route + path="/" + element={ + <div className="relative min-h-screen bg-transparent"> + <BackgroundCanvas theme={theme} /> + <div className="relative z-10"> + <MainPage theme={theme} /> + </div> + </div> + } + /> <Route path="/departments/:id" element={<DepartmentDetail />} /> <Route path="/department-detail2" element={<DepartmentDetail2 />} /> </Routes> @@ -48,7 +151,8 @@ function RouterView() { ); } -function Layout() { +// المكون الذي يتحكم في التخطيط +function Layout({ theme, toggleTheme }) { const location = useLocation(); const excludedExactPaths = [ @@ -66,21 +170,71 @@ function Layout() { return ( <> - {!hideNavbar && <Navbar />} + {!hideNavbar && <Navbar toggleTheme={toggleTheme} currentTheme={theme} />} <div style={{ paddingTop: navbarHeight }}> - <RouterView /> + <RouterView theme={theme} toggleTheme={toggleTheme} /> + + {/* إظهار Footer فقط في الصفحة الرئيسية */} + {location.pathname === "/" && <Footer />} </div> </> ); } +// المكون الرئيسي للتطبيق const App = () => { + const [theme, setTheme] = useState("light"); + + useEffect(() => { + // تتبع الثيم لأغراض التصحيح + console.log("Current theme:", theme); + console.log("HTML has dark class:", document.documentElement.classList.contains('dark')); + + const canvas = document.querySelector('.background-canvas'); + if (canvas) { + console.log("Canvas found:", canvas); + console.log("Canvas dimensions:", canvas.width, "x", canvas.height); + } else { + console.log("Canvas NOT found!"); + } + }, [theme]); + + // تهيئة الثيم من localStorage + useEffect(() => { + const savedTheme = localStorage.getItem("theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + + if (savedTheme === "dark" || (!savedTheme && prefersDark)) { + setTheme("dark"); + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + setTheme("light"); + } + }, []); + + // دالة تبديل الثيم + const toggleTheme = () => { + const newTheme = theme === "light" ? "dark" : "light"; + setTheme(newTheme); + + if (newTheme === "dark") { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + + localStorage.setItem("theme", newTheme); + }; + return ( - <BrowserRouter> - <Layout /> - </BrowserRouter> + <ImagePreloader> + <BrowserRouter> + <Layout theme={theme} toggleTheme={toggleTheme} /> + </BrowserRouter> + </ImagePreloader> ); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/Components/ImagePreloader.jsx b/src/Components/ImagePreloader.jsx index 7b6e0e8..2c6aadb 100644 --- a/src/Components/ImagePreloader.jsx +++ b/src/Components/ImagePreloader.jsx @@ -1,22 +1,22 @@ -// import { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; -// // Import all images statically -// // import home1 from "../assets/home1.jpg"; -// // import home1Mobile from "../assets/home1-2.jpg"; -// // import home2 from "../assets/home2.jpg"; -// // import home2Mobile from "../assets/home2-2.jpg"; -// // import home3 from "../assets/home3.png"; -// // import home4 from "../assets/home4.png"; -// // // import home4Mobile from "../assets/home4-2.jpg"; -// // import home5 from "../assets/home5.png"; -// // import home6 from "../assets/home6.jpg"; -// // import home6Mobile from "../assets/home6-2.jpg"; -// // import home7 from "../assets/home7.jpg"; -// // import home7Mobile from "../assets/home7-2.jpg"; -// // import home8 from "../assets/home8.jpg"; -// // import home8Mobile from "../assets/home8-2.jpg"; -// // import home9 from "../assets/home9.jpg"; -// // import home10 from "../assets/home10.jpg"; +// Import all images statically +// import home1 from "../assets/home1.jpg"; +// import home1Mobile from "../assets/home1-2.jpg"; +// import home2 from "../assets/home2.jpg"; +// import home2Mobile from "../assets/home2-2.jpg"; +// import home3 from "../assets/home3.png"; +// import home4 from "../assets/home4.png"; +// // import home4Mobile from "../assets/home4-2.jpg"; +// import home5 from "../assets/home5.png"; +// import home6 from "../assets/home6.jpg"; +// import home6Mobile from "../assets/home6-2.jpg"; +// import home7 from "../assets/home7.jpg"; +// import home7Mobile from "../assets/home7-2.jpg"; +// import home8 from "../assets/home8.jpg"; +// import home8Mobile from "../assets/home8-2.jpg"; +// import home9 from "../assets/home9.jpg"; +// import home10 from "../assets/home10.jpg"; // Services images // import gasStation from "../assets/Images/gasstation.jpg"; @@ -44,293 +44,293 @@ const imagesToPreload = [ // Services images // gasStation, -// ]; +]; -// const ImagePreloader = ({ children }) => { -// const [imagesLoaded, setImagesLoaded] = useState(false); -// const [progress, setProgress] = useState(0); +const ImagePreloader = ({ children }) => { + const [imagesLoaded, setImagesLoaded] = useState(false); + const [progress, setProgress] = useState(0); -// useEffect(() => { -// let loadedCount = 0; -// const totalImages = imagesToPreload.length; + useEffect(() => { + let loadedCount = 0; + const totalImages = imagesToPreload.length; -// const preloadImages = async () => { -// try { -// const loadImage = (src) => { -// return new Promise((resolve, reject) => { -// const img = new Image(); -// img.src = src; -// img.onload = () => { -// loadedCount++; -// setProgress(Math.floor((loadedCount / totalImages) * 100)); -// resolve(); -// }; -// img.onerror = reject; -// }); -// }; + const preloadImages = async () => { + try { + const loadImage = (src) => { + return new Promise((resolve, reject) => { + const img = new Image(); + img.src = src; + img.onload = () => { + loadedCount++; + setProgress(Math.floor((loadedCount / totalImages) * 100)); + resolve(); + }; + img.onerror = reject; + }); + }; -// await Promise.all(imagesToPreload.map(loadImage)); -// setImagesLoaded(true); -// } catch (error) { -// console.error("Failed to preload images:", error); -// // Continue anyway after a timeout -// setTimeout(() => setImagesLoaded(true), 3000); -// } -// }; + await Promise.all(imagesToPreload.map(loadImage)); + setImagesLoaded(true); + } catch (error) { + console.error("Failed to preload images:", error); + // Continue anyway after a timeout + setTimeout(() => setImagesLoaded(true), 3000); + } + }; -// preloadImages(); -// }, []); + preloadImages(); + }, []); -// if (!imagesLoaded) { -// return ( -// <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50"> -// {/* Animated background effect */} -// <div className="absolute inset-0 overflow-hidden opacity-10"> -// <div className="absolute top-0 left-0 w-full h-full"> -// {[...Array(20)].map((_, i) => ( -// <div -// key={i} -// className="absolute rounded-full bg-white/30" -// style={{ -// width: `${Math.random() * 10 + 5}px`, -// height: `${Math.random() * 10 + 5}px`, -// top: `${Math.random() * 100}%`, -// left: `${Math.random() * 100}%`, -// animationDuration: `${Math.random() * 10 + 10}s`, -// animationDelay: `${Math.random() * 5}s`, -// }} -// /> -// ))} -// </div> -// </div> + if (!imagesLoaded) { + return ( + <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50"> + {/* Animated background effect */} + <div className="absolute inset-0 overflow-hidden opacity-10"> + <div className="absolute top-0 left-0 w-full h-full"> + {[...Array(20)].map((_, i) => ( + <div + key={i} + className="absolute rounded-full bg-white/30" + style={{ + width: `${Math.random() * 10 + 5}px`, + height: `${Math.random() * 10 + 5}px`, + top: `${Math.random() * 100}%`, + left: `${Math.random() * 100}%`, + animationDuration: `${Math.random() * 10 + 10}s`, + animationDelay: `${Math.random() * 5}s`, + }} + /> + ))} + </div> + </div> -// {/* Company logo or branding could go here */} -// <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider"> -// TPS -// </div> + {/* Company logo or branding could go here */} + <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider"> + TPS + </div> -// {/* 3D-style Fuel Tank */} -// <div className="relative w-72 h-56 mb-8 perspective-800"> -// {/* Tank body with 3D effect */} -// <div -// className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl" -// style={{ -// background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)", -// boxShadow: -// "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)", -// border: "1px solid rgba(255,255,255,0.1)", -// }} -// > -// {/* Glass effect overlay */} -// <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div> + {/* 3D-style Fuel Tank */} + <div className="relative w-72 h-56 mb-8 perspective-800"> + {/* Tank body with 3D effect */} + <div + className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl" + style={{ + background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)", + boxShadow: + "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)", + border: "1px solid rgba(255,255,255,0.1)", + }} + > + {/* Glass effect overlay */} + <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div> -// {/* Tank Cap with metallic effect */} -// <div -// className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md" -// style={{ -// background: -// "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)", -// boxShadow: "0 -2px 5px rgba(0,0,0,0.2)", -// }} -// > -// <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div> -// </div> + {/* Tank Cap with metallic effect */} + <div + className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md" + style={{ + background: + "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)", + boxShadow: "0 -2px 5px rgba(0,0,0,0.2)", + }} + > + <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div> + </div> -// {/* Fuel Level with dynamic wave effect */} -// <div -// className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out" -// style={{ -// height: `${progress}%`, -// background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)", -// boxShadow: "0 -5px 15px rgba(235,131,23,0.3)", -// }} -// > -// {/* Animated wave effect at the top of fuel */} -// <div className="absolute -top-2 left-0 w-full h-4 animate-wave"> -// <div -// className="relative w-[200%] h-full" -// style={{ -// backgroundImage: -// "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)", -// backgroundSize: "50% 100%", -// animation: "moveWave 3s linear infinite", -// }} -// ></div> -// </div> + {/* Fuel Level with dynamic wave effect */} + <div + className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out" + style={{ + height: `${progress}%`, + background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)", + boxShadow: "0 -5px 15px rgba(235,131,23,0.3)", + }} + > + {/* Animated wave effect at the top of fuel */} + <div className="absolute -top-2 left-0 w-full h-4 animate-wave"> + <div + className="relative w-[200%] h-full" + style={{ + backgroundImage: + "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)", + backgroundSize: "50% 100%", + animation: "moveWave 3s linear infinite", + }} + ></div> + </div> -// {/* Bubbles with varied animations */} -// {[...Array(8)].map((_, i) => ( -// <div -// key={i} -// className="absolute rounded-full bg-white/20" -// style={{ -// width: `${Math.random() * 6 + 2}px`, -// height: `${Math.random() * 6 + 2}px`, -// bottom: `${Math.random() * 80}%`, -// left: `${Math.random() * 90 + 5}%`, -// animation: `bubble ${ -// Math.random() * 3 + 2 -// }s ease-in infinite ${Math.random() * 2}s`, -// }} -// /> -// ))} -// </div> + {/* Bubbles with varied animations */} + {[...Array(8)].map((_, i) => ( + <div + key={i} + className="absolute rounded-full bg-white/20" + style={{ + width: `${Math.random() * 6 + 2}px`, + height: `${Math.random() * 6 + 2}px`, + bottom: `${Math.random() * 80}%`, + left: `${Math.random() * 90 + 5}%`, + animation: `bubble ${ + Math.random() * 3 + 2 + }s ease-in infinite ${Math.random() * 2}s`, + }} + /> + ))} + </div> -// {/* Tank level markings with glow effect */} -// <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none"> -// {[...Array(4)].map((_, i) => ( -// <div -// key={i} -// className="w-full border-b border-[#F3C623]/20 h-1/4" -// style={{ -// boxShadow: -// progress > 75 - i * 25 -// ? "0 1px 3px rgba(243,198,35,0.3)" -// : "none", -// }} -// > -// <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div> -// </div> -// ))} -// </div> -// </div> + {/* Tank level markings with glow effect */} + <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none"> + {[...Array(4)].map((_, i) => ( + <div + key={i} + className="w-full border-b border-[#F3C623]/20 h-1/4" + style={{ + boxShadow: + progress > 75 - i * 25 + ? "0 1px 3px rgba(243,198,35,0.3)" + : "none", + }} + > + <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div> + </div> + ))} + </div> + </div> -// {/* Fuel Gauge with realistic dial */} -// <div -// className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center" -// style={{ -// background: -// "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)", -// boxShadow: -// "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)", -// border: "2px solid rgba(235,131,23,0.7)", -// }} -// > -// {/* Gauge markings */} -// {[...Array(9)].map((_, i) => { -// const rotation = -135 + i * 30; -// const isLarge = i % 2 === 0; -// return ( -// <div -// key={i} -// className={`absolute w-${isLarge ? "1.5" : "1"} h-${ -// isLarge ? "3" : "2" -// } bg-[#F3C623]/${isLarge ? "70" : "40"}`} -// style={{ -// transform: `rotate(${rotation}deg) translateY(-7px)`, -// transformOrigin: "bottom center", -// }} -// /> -// ); -// })} + {/* Fuel Gauge with realistic dial */} + <div + className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center" + style={{ + background: + "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)", + boxShadow: + "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)", + border: "2px solid rgba(235,131,23,0.7)", + }} + > + {/* Gauge markings */} + {[...Array(9)].map((_, i) => { + const rotation = -135 + i * 30; + const isLarge = i % 2 === 0; + return ( + <div + key={i} + className={`absolute w-${isLarge ? "1.5" : "1"} h-${ + isLarge ? "3" : "2" + } bg-[#F3C623]/${isLarge ? "70" : "40"}`} + style={{ + transform: `rotate(${rotation}deg) translateY(-7px)`, + transformOrigin: "bottom center", + }} + /> + ); + })} -// {/* Gauge needle with smooth animation */} -// <div -// className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom" -// style={{ -// transform: `rotate(${-135 + progress * 2.7}deg)`, -// transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)", -// boxShadow: "0 0 5px rgba(243,198,35,0.5)", -// }} -// > -// <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div> -// </div> + {/* Gauge needle with smooth animation */} + <div + className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom" + style={{ + transform: `rotate(${-135 + progress * 2.7}deg)`, + transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)", + boxShadow: "0 0 5px rgba(243,198,35,0.5)", + }} + > + <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div> + </div> -// {/* Center pin */} -// <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div> + {/* Center pin */} + <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div> -// {/* E and F indicators */} -// <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold"> -// E -// </div> -// <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold"> -// F -// </div> -// </div> -// </div> + {/* E and F indicators */} + <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold"> + E + </div> + <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold"> + F + </div> + </div> + </div> -// {/* Progress indicator with animated glow */} -// <div className="relative"> -// <p -// className="text-white text-2xl font-bold" -// style={{ -// textShadow: "0 0 10px rgba(255,255,255,0.3)", -// }} -// > -// {progress}% -// </p> -// <div -// className="absolute -inset-4 rounded-full opacity-0" -// style={{ -// background: -// "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)", -// animation: "pulse 2s ease-in-out infinite", -// }} -// ></div> -// </div> + {/* Progress indicator with animated glow */} + <div className="relative"> + <p + className="text-white text-2xl font-bold" + style={{ + textShadow: "0 0 10px rgba(255,255,255,0.3)", + }} + > + {progress}% + </p> + <div + className="absolute -inset-4 rounded-full opacity-0" + style={{ + background: + "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)", + animation: "pulse 2s ease-in-out infinite", + }} + ></div> + </div> -// <p className="mt-2 text-gray-300 font-medium tracking-wide"> -// Filling your tank... -// </p> + <p className="mt-2 text-gray-300 font-medium tracking-wide"> + Filling your tank... + </p> -// {/* Advanced animations */} -// {/* <style jsx>{` -// @keyframes bubble { -// 0% { -// transform: translateY(0) scale(0.8); -// opacity: 0; -// } -// 20% { -// opacity: 0.8; -// transform: translateY(-10px) scale(1); -// } -// 80% { -// opacity: 0.8; -// transform: translateY(-30px) scale(0.9); -// } -// 100% { -// transform: translateY(-40px) scale(0.3); -// opacity: 0; -// } -// } + {/* Advanced animations */} + {/* <style jsx>{` + @keyframes bubble { + 0% { + transform: translateY(0) scale(0.8); + opacity: 0; + } + 20% { + opacity: 0.8; + transform: translateY(-10px) scale(1); + } + 80% { + opacity: 0.8; + transform: translateY(-30px) scale(0.9); + } + 100% { + transform: translateY(-40px) scale(0.3); + opacity: 0; + } + } -// @keyframes pulse { -// 0% { -// opacity: 0; -// transform: scale(0.8); -// } -// 50% { -// opacity: 0.5; -// transform: scale(1.1); -// } -// 100% { -// opacity: 0; -// transform: scale(0.8); -// } -// } + @keyframes pulse { + 0% { + opacity: 0; + transform: scale(0.8); + } + 50% { + opacity: 0.5; + transform: scale(1.1); + } + 100% { + opacity: 0; + transform: scale(0.8); + } + } -// @keyframes moveWave { -// 0% { -// transform: translateX(0); -// } -// 100% { -// transform: translateX(-50%); -// } -// } + @keyframes moveWave { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } + } -// .perspective-800 { -// perspective: 800px; -// } + .perspective-800 { + perspective: 800px; + } -// .animate-wave { -// overflow: hidden; -// } -// `}</style> */} -// </div> -// ); -// } + .animate-wave { + overflow: hidden; + } + `}</style> */} + </div> + ); + } -// return <>{children}</>; -// }; + return <>{children}</>; +}; -// export default ImagePreloader; +export default ImagePreloader; diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx index f7bc70c..2731245 100644 --- a/src/Components/Nav/Navbar.jsx +++ b/src/Components/Nav/Navbar.jsx @@ -1,7 +1,697 @@ +// import React, { useState, useEffect } from "react"; +// import styled from "styled-components"; +// import { useTranslation } from "react-i18next"; +// import { Link, animateScroll as scroll } from "react-scroll"; + +// const SunIcon = ({ className }) => ( +// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden> +// <path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" /> +// </svg> +// ); +// const MoonIcon = ({ className }) => ( +// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden> +// <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// </svg> +// ); +// const GlobeIcon = ({ className }) => ( +// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden> +// <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> +// </svg> +// ); + +// const StyledWrapper = styled.div` +// /* Base Styles */ +// .switch { +// display: inline-block; +// /* reduced a bit */ +// width: 5.2em; +// height: 2.6em; +// position: relative; +// font-size: 16px; +// user-select: none; +// margin: 0; +// transform-origin: center; +// } + +// /* Hide default HTML checkbox */ +// .switch input { +// opacity: 0; +// width: 0; +// height: 0; +// position: absolute; +// } + +// /* Slider */ +// .slider { +// position: absolute; +// cursor: pointer; +// top: 0; +// left: 0; +// right: 0; +// bottom: 0; +// background: linear-gradient(to right, #87ceeb, #e0f6ff); +// border-radius: 50px; +// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); +// box-shadow: +// 0 4px 8px rgba(0, 0, 0, 0.1), +// inset 0 -5px 10px rgba(0, 0, 0, 0.1); +// overflow: hidden; +// } + +// /* Inner slider for additional styling */ +// .slider-inner { +// position: absolute; +// top: 0.28em; +// left: 0.28em; +// height: 2.1em; +// width: 2.1em; +// border-radius: 50%; +// background-color: #ffd700; +// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); +// box-shadow: +// 0 2px 4px rgba(0, 0, 0, 0.2), +// inset 0 -2px 5px rgba(0, 0, 0, 0.2); +// } + +// /* Checked state */ +// .switch input:checked + .slider { +// background: linear-gradient(to right, #1a237e, #3949ab); +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(2.6em); +// background-color: #ffffff; +// } + +// /* Focus state */ +// .switch input:focus + .slider { +// outline: none; +// box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5); +// } + +// /* Hover and active states */ +// .switch:hover .slider { +// background: linear-gradient(to right, #64b5f6, #e3f2fd); +// } + +// .switch input:checked:hover + .slider { +// background: linear-gradient(to right, #283593, #5c6bc0); +// } + +// /* Animation for slider inner */ +// @keyframes sunPulse { +// 0%, +// 100% { +// box-shadow: +// 0 0 0 0 rgba(255, 215, 0, 0.7), +// 0 0 0 0 rgba(255, 215, 0, 0.4); +// } +// 50% { +// box-shadow: +// 0 0 20px 10px rgba(255, 215, 0, 0.7), +// 0 0 40px 20px rgba(255, 215, 0, 0.4); +// } +// } + +// @keyframes moonPhase { +// 0%, +// 100% { +// box-shadow: +// inset -10px -5px 0 0 #ddd, +// 0 0 20px rgba(255, 255, 255, 0.5); +// } +// 50% { +// box-shadow: +// inset 0 0 0 0 #ddd, +// 0 0 20px rgba(255, 255, 255, 0.5); +// } +// } + +// .switch input:not(:checked) + .slider .slider-inner { +// animation: sunPulse 3s infinite; +// } + +// .switch input:checked + .slider .slider-inner { +// animation: moonPhase 5s infinite; +// } + +// /* Stars effect */ +// @keyframes twinkle { +// 0%, +// 100% { +// opacity: 0.2; +// } +// 50% { +// opacity: 1; +// } +// } + +// .slider::before, +// .slider::after { +// content: ""; +// position: absolute; +// width: 4px; +// height: 4px; +// background-color: #ffffff; +// border-radius: 50%; +// transition: all 0.6s ease; +// opacity: 0; +// } + +// .slider::before { +// top: 20%; +// left: 30%; +// } + +// .slider::after { +// bottom: 25%; +// right: 25%; +// } + +// .switch input:checked + .slider::before, +// .switch input:checked + .slider::after { +// opacity: 1; +// animation: twinkle 2s infinite; +// } + +// .switch input:checked + .slider::before { +// animation-delay: 0.5s; +// } + +// /* 3D effect */ +// .slider { +// transform-style: preserve-3d; +// perspective: 500px; +// } + +// .slider-inner { +// transform: translateZ(5px); +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(2.6em) translateZ(5px) rotateY(180deg); +// } + +// /* Cloud effect for day mode */ +// .slider-inner::before, +// .slider-inner::after { +// content: ""; +// position: absolute; +// background-color: rgba(255, 255, 255, 0.8); +// border-radius: 50%; +// transition: all 0.6s ease; +// } + +// .slider-inner::before { +// width: 1em; +// height: 1em; +// top: -0.5em; +// left: -0.2em; +// } + +// .slider-inner::after { +// width: 1.2em; +// height: 1.2em; +// bottom: -0.6em; +// right: -0.3em; +// } + +// .switch input:checked + .slider .slider-inner::before, +// .switch input:checked + .slider .slider-inner::after { +// opacity: 0; +// } + +// /* Crater effect for night mode */ +// .switch input:checked + .slider .slider-inner::before { +// width: 0.6em; +// height: 0.6em; +// background-color: rgba(0, 0, 0, 0.2); +// top: 0.3em; +// left: 0.3em; +// opacity: 1; +// } + +// .switch input:checked + .slider .slider-inner::after { +// width: 0.4em; +// height: 0.4em; +// background-color: rgba(0, 0, 0, 0.15); +// bottom: 0.5em; +// right: 0.5em; +// opacity: 1; +// } + +// /* Accessibility improvements */ +// .switch input:focus + .slider { +// outline: 2px solid #4a90e2; +// outline-offset: 2px; +// } + +// /* Responsive adjustments */ +// @media (max-width: 768px) { +// .switch { +// width: 4.6em; +// height: 2.3em; +// } + +// .slider-inner { +// height: 1.85em; +// width: 1.85em; +// top: 0.23em; +// left: 0.23em; +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(2.2em) translateZ(5px) rotateY(180deg); +// } +// } + +// @media (max-width: 480px) { +// .switch { +// width: 3.8em; +// height: 1.9em; +// } + +// .slider-inner { +// height: 1.5em; +// width: 1.5em; +// top: 0.2em; +// left: 0.2em; +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(1.8em) translateZ(5px) rotateY(180deg); +// } +// } + +// /* High contrast mode */ +// @media (forced-colors: active) { +// .slider { +// background: Canvas; +// border: 2px solid ButtonText; +// } + +// .switch input:checked + .slider { +// background: Highlight; +// } + +// .slider-inner { +// background-color: ButtonFace; +// } + +// .switch::before, +// .switch::after { +// color: ButtonText; +// } +// } + +// /* Reduced motion preference */ +// @media (prefers-reduced-motion: reduce) { +// .switch, +// .slider, +// .slider-inner { +// transition: none; +// } + +// .switch input:checked + .slider .slider-inner, +// .switch input:not(:checked) + .slider .slider-inner, +// .switch input:checked + .slider::before, +// .switch input:checked + .slider::after { +// animation: none; +// } +// } +// `; + +// const ThemeToggle = ({ theme, setTheme }) => { +// const isDark = theme === "dark"; + +// const toggle = () => { +// const next = isDark ? "light" : "dark"; +// setTheme(next); +// if (next === "dark") document.documentElement.classList.add("dark"); +// else document.documentElement.classList.remove("dark"); +// try { +// localStorage.setItem("theme", next); +// } catch (e) {} +// }; + +// return ( +// <StyledWrapper> +// <label +// role="switch" +// aria-checked={isDark} +// tabIndex={0} +// className="switch" +// onKeyDown={(e) => { +// if (e.key === "Enter" || e.key === " ") { +// e.preventDefault(); +// toggle(); +// } +// }} +// > +// <input +// type="checkbox" +// checked={isDark} +// onChange={toggle} +// aria-hidden="false" +// /> +// <span className="slider" aria-hidden="true"> +// <span className="slider-inner" /> +// </span> +// </label> +// </StyledWrapper> +// ); +// }; + +// const LanguageToggle = ({ i18n }) => { +// const isAr = i18n.language === "ar"; +// const toggle = () => { +// const next = isAr ? "en" : "ar"; +// i18n.changeLanguage(next); +// if (next === "ar") { +// document.documentElement.dir = "rtl"; +// document.documentElement.lang = "ar"; +// } else { +// document.documentElement.dir = "ltr"; +// document.documentElement.lang = next; +// } +// }; + +// return ( +// <button +// onClick={toggle} +// className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95" +// aria-label="Toggle language" +// title={isAr ? "Switch to English" : "التبديل للعربية"} +// > +// <GlobeIcon className="w-4 h-4" /> +// <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span> +// <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span> +// </button> +// ); +// }; + +// const Navbar = () => { +// const { t, i18n } = useTranslation(); +// const [menuOpen, setMenuOpen] = useState(false); +// const [activeSection, setActiveSection] = useState("home"); +// const [theme, setTheme] = useState("light"); + +// useEffect(() => { +// try { +// const saved = localStorage.getItem("theme"); +// if (saved) setTheme(saved); +// else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); +// } catch (e) { +// if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); +// } +// }, []); + +// useEffect(() => { +// if (theme === "dark") document.documentElement.classList.add("dark"); +// else document.documentElement.classList.remove("dark"); +// }, [theme]); + +// useEffect(() => { +// const handleScroll = () => { +// const sections = ["home", "services", "about", "contact"]; +// const scrollPosition = window.scrollY + 140; +// for (const section of sections) { +// const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`); +// if (element) { +// const offsetTop = element.offsetTop; +// const offsetHeight = element.offsetHeight; +// if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) { +// setActiveSection(section); +// break; +// } +// } +// } +// }; +// handleScroll(); +// window.addEventListener("scroll", handleScroll, { passive: true }); +// return () => window.removeEventListener("scroll", handleScroll); +// }, []); + +// const navItems = [ +// { key: "home", label: t("nav.home") || "Home" }, +// { key: "services", label: t("nav.services") || "Services" }, +// { key: "about", label: t("nav.about") || "About" }, +// { key: "contact", label: t("nav.contact") || "Contact" }, +// ]; + +// return ( +// <> +// <style>{` +// /* background and glass */ +// .glass-nav { +// background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9)); +// color: #e6e6e6; +// border-bottom: 1px solid rgba(255,255,255,0.05); +// backdrop-filter: blur(8px); +// -webkit-backdrop-filter: blur(8px); +// } + +// /* nav links */ +// .nav-link { +// position: relative; +// padding-bottom: 6px; +// transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease; +// color: rgba(229,231,235,0.95); +// display: inline-block; +// } +// .nav-link::after { +// content: ''; +// position: absolute; +// left: 50%; +// transform: translateX(-50%) scaleX(0); +// bottom: -8px; +// height: 3px; +// width: 64%; +// border-radius: 999px; +// transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s; +// opacity: 0; +// } +// .nav-link:hover { +// transform: translateY(-6px) scale(1.03); +// color: #fff; +// text-shadow: 0 10px 30px rgba(2,6,23,0.5); +// box-shadow: 0 8px 24px rgba(2,6,23,0.25); +// } +// .nav-link:hover::after { +// background: linear-gradient(90deg, #9CA3AF, #F59E0B); +// transform: translateX(-50%) scaleX(1); +// opacity: 1; +// } +// .nav-link.active { +// color: #fff; +// font-weight: 700; +// } +// .nav-link.active::after { +// background: linear-gradient(90deg, #9CA3AF, #F59E0B); +// transform: translateX(-50%) scaleX(1); +// opacity: 1; +// } + +// /* NEW: pill / circular orange background for the active/pressed link */ +// .nav-pill { +// display: inline-flex; +// align-items: center; +// justify-content: center; +// padding: 0.32rem 0.6rem; /* vertical horizontal */ +// border-radius: 999px; +// transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease; +// background: transparent; +// color: inherit; +// line-height: 1; +// font-weight: 600; +// } + +// /* active (current) */ +// .nav-link.active .nav-pill, +// .nav-link:active .nav-pill, +// .nav-link:focus-visible .nav-pill { +// background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */ +// color: #0b0b0b; /* dark text for contrast on orange */ +// box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12); +// transform: translateY(-4px) scale(1.03); +// } + +// /* Make press feedback snappier */ +// .nav-link:active .nav-pill { +// transform: translateY(-2px) scale(0.995); +// } + +// /* mobile drawer */ +// .mobile-drawer { +// background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95)); +// backdrop-filter: blur(6px); +// } + +// /* ensure mobile pill doesn't stretch full width — make it inline inside block */ +// .mobile-drawer .nav-pill { +// display: inline-flex; +// padding: 0.4rem 0.8rem; +// } + +// /* adjust mobile active color */ +// .mobile-drawer .nav-pill.active, +// .mobile-drawer a[aria-current="page"] .nav-pill { +// background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); +// color: #0b0b0b; +// } + +// /* Enhanced button hover (more professional) */ +// .glass-nav button, .mobile-drawer button { +// transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease; +// will-change: transform, box-shadow; +// } + +// .glass-nav button:hover, .mobile-drawer button:hover { +// transform: translateY(-3px); +// box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12); +// } + +// .glass-nav button:active, .mobile-drawer button:active { +// transform: translateY(-1px) scale(0.995); +// box-shadow: 0 6px 18px rgba(2,6,23,0.2); +// } + +// .glass-nav button:focus { +// outline: none; +// box-shadow: 0 0 0 4px rgba(245,158,11,0.12); +// } + +// `}</style> + +// <nav +// className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3" +// aria-label="Main navigation" +// role="navigation" +// > +// <div className="mx-auto max-w-screen-xl"> +// <div className="flex items-center justify-between h-14 px-2 md:px-4"> +// <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse"> +// <ul className="flex items-center gap-6"> +// {navItems.map((item) => { +// const isActive = activeSection === item.key; +// return ( +// <li key={item.key}> +// <Link +// to={item.key} +// smooth +// duration={600} +// spy={true} +// offset={-110} +// onSetActive={() => setActiveSection(item.key)} +// onClick={() => { +// if (item.key === "home") scroll.scrollToTop({ duration: 600 }); +// if (menuOpen) setMenuOpen(false); +// }} +// className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`} +// aria-current={isActive ? "page" : undefined} +// > +// <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span> +// </Link> +// </li> +// ); +// })} +// </ul> +// </div> + +// {/* controls */} +// <div className="flex items-center gap-3 md:gap-5"> +// <div className="hidden md:flex items-center gap-3"> +// <LanguageToggle i18n={i18n} /> +// <ThemeToggle theme={theme} setTheme={setTheme} /> +// </div> + +// <div className="md:hidden flex items-center gap-2"> +// <ThemeToggle theme={theme} setTheme={setTheme} /> +// <button +// onClick={() => setMenuOpen((s) => !s)} +// aria-controls="mobile-menu" +// aria-expanded={menuOpen} +// className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105" +// > +// <span className="sr-only">Open main menu</span> +// <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden> +// {menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>} +// </svg> +// </button> +// </div> +// </div> +// </div> + +// {/* mobile drawer */} +// <div +// id="mobile-menu" +// className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`} +// > +// <div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl"> +// <div className="flex items-center justify-between mb-3"> +// <div className="flex items-center gap-3"></div> +// <div className="flex items-center gap-2"> +// <LanguageToggle i18n={i18n} /> +// </div> +// </div> + +// <ul className="flex flex-col gap-2"> +// {navItems.map((item) => { +// const isActive = activeSection === item.key; +// return ( +// <li key={item.key}> +// <Link +// to={item.key} +// smooth +// duration={600} +// spy={true} +// offset={-110} +// onSetActive={() => setActiveSection(item.key)} +// onClick={() => { +// if (item.key === "home") scroll.scrollToTop({ duration: 600 }); +// setMenuOpen(false); +// }} +// className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`} +// aria-current={isActive ? "page" : undefined} +// > +// {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */} +// <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span> +// </Link> +// </li> +// ); +// })} +// </ul> + +// <div className="mt-4 flex items-center gap-3"> +// <ThemeToggle theme={theme} setTheme={setTheme} /> +// <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95"> +// {t("nav.getQuote") || "Get Quote"} +// </button> +// </div> +// </div> +// </div> +// </div> +// </nav> +// </> +// ); +// }; + +// export default Navbar; + + import React, { useState, useEffect } from "react"; import styled from "styled-components"; import { useTranslation } from "react-i18next"; import { Link, animateScroll as scroll } from "react-scroll"; +import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher"; const SunIcon = ({ className }) => ( <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden> @@ -19,19 +709,11 @@ const MoonIcon = ({ className }) => ( <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); -const GlobeIcon = ({ className }) => ( - <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden> - <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> - <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> - <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> - </svg> -); const StyledWrapper = styled.div` /* Base Styles */ .switch { display: inline-block; - /* reduced a bit */ width: 5.2em; height: 2.6em; position: relative; @@ -329,18 +1011,8 @@ const StyledWrapper = styled.div` } `; -const ThemeToggle = ({ theme, setTheme }) => { - const isDark = theme === "dark"; - - const toggle = () => { - const next = isDark ? "light" : "dark"; - setTheme(next); - if (next === "dark") document.documentElement.classList.add("dark"); - else document.documentElement.classList.remove("dark"); - try { - localStorage.setItem("theme", next); - } catch (e) {} - }; +const ThemeToggle = ({ currentTheme, toggleTheme }) => { + const isDark = currentTheme === "dark"; return ( <StyledWrapper> @@ -352,14 +1024,14 @@ const ThemeToggle = ({ theme, setTheme }) => { onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); - toggle(); + toggleTheme(); } }} > <input type="checkbox" checked={isDark} - onChange={toggle} + onChange={toggleTheme} aria-hidden="false" /> <span className="slider" aria-hidden="true"> @@ -370,59 +1042,16 @@ const ThemeToggle = ({ theme, setTheme }) => { ); }; -const LanguageToggle = ({ i18n }) => { - const isAr = i18n.language === "ar"; - const toggle = () => { - const next = isAr ? "en" : "ar"; - i18n.changeLanguage(next); - if (next === "ar") { - document.documentElement.dir = "rtl"; - document.documentElement.lang = "ar"; - } else { - document.documentElement.dir = "ltr"; - document.documentElement.lang = next; - } - }; - - return ( - <button - onClick={toggle} - className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95" - aria-label="Toggle language" - title={isAr ? "Switch to English" : "التبديل للعربية"} - > - <GlobeIcon className="w-4 h-4" /> - <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span> - <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span> - </button> - ); -}; - -const Navbar = () => { +const Navbar = ({ toggleTheme, currentTheme }) => { const { t, i18n } = useTranslation(); const [menuOpen, setMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState("home"); - const [theme, setTheme] = useState("light"); - - useEffect(() => { - try { - const saved = localStorage.getItem("theme"); - if (saved) setTheme(saved); - else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); - } catch (e) { - if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); - } - }, []); - - useEffect(() => { - if (theme === "dark") document.documentElement.classList.add("dark"); - else document.documentElement.classList.remove("dark"); - }, [theme]); useEffect(() => { const handleScroll = () => { const sections = ["home", "services", "about", "contact"]; const scrollPosition = window.scrollY + 140; + for (const section of sections) { const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`); if (element) { @@ -435,11 +1064,22 @@ const Navbar = () => { } } }; + handleScroll(); window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); + useEffect(() => { + if (i18n.language === "ar") { + document.documentElement.dir = "rtl"; + document.documentElement.lang = "ar"; + } else { + document.documentElement.dir = "ltr"; + document.documentElement.lang = i18n.language; + } + }, [i18n.language]); + const navItems = [ { key: "home", label: t("nav.home") || "Home" }, { key: "services", label: t("nav.services") || "Services" }, @@ -578,6 +1218,13 @@ const Navbar = () => { > <div className="mx-auto max-w-screen-xl"> <div className="flex items-center justify-between h-14 px-2 md:px-4"> + {/* Logo - from second code */} + <img + src="/src/assets/TPS-logo.png" + className="h-8 sm:h-10 md:h-12 transition-all duration-300" + alt="TPS Logo" + /> + <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse"> <ul className="flex items-center gap-6"> {navItems.map((item) => { @@ -609,12 +1256,13 @@ const Navbar = () => { {/* controls */} <div className="flex items-center gap-3 md:gap-5"> <div className="hidden md:flex items-center gap-3"> - <LanguageToggle i18n={i18n} /> - <ThemeToggle theme={theme} setTheme={setTheme} /> + {/* LanguageSwitcher from second code */} + <LanguageSwitcher /> + <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} /> </div> <div className="md:hidden flex items-center gap-2"> - <ThemeToggle theme={theme} setTheme={setTheme} /> + <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} /> <button onClick={() => setMenuOpen((s) => !s)} aria-controls="mobile-menu" @@ -639,7 +1287,7 @@ const Navbar = () => { <div className="flex items-center justify-between mb-3"> <div className="flex items-center gap-3"></div> <div className="flex items-center gap-2"> - <LanguageToggle i18n={i18n} /> + <LanguageSwitcher /> </div> </div> @@ -662,7 +1310,6 @@ const Navbar = () => { className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`} aria-current={isActive ? "page" : undefined} > - {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */} <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span> </Link> </li> @@ -671,7 +1318,7 @@ const Navbar = () => { </ul> <div className="mt-4 flex items-center gap-3"> - <ThemeToggle theme={theme} setTheme={setTheme} /> + <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} /> <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95"> {t("nav.getQuote") || "Get Quote"} </button> diff --git a/src/Components/Sections/Contact/Contact.jsx b/src/Components/Sections/Contact/Contact.jsx index 355b3af..207d304 100644 --- a/src/Components/Sections/Contact/Contact.jsx +++ b/src/Components/Sections/Contact/Contact.jsx @@ -1,3 +1,455 @@ +// import { useTranslation } from "react-i18next"; +// import { +// FaMapMarkerAlt, +// FaPhoneAlt, +// FaEnvelope, +// FaWhatsapp, +// FaPaperPlane, +// } from "react-icons/fa"; +// import emailjs from "@emailjs/browser"; +// import { useRef, useState } from "react"; +// import { motion } from "framer-motion"; + +// const Contact = () => { +// const { t } = useTranslation(); +// const form = useRef(); +// const [message, setMessage] = useState({ text: "", type: "" }); +// const [isLoading, setIsLoading] = useState(false); + +// const sendEmail = (e) => { +// e.preventDefault(); +// setIsLoading(true); +// setMessage({ text: "", type: "" }); +// emailjs +// .sendForm( +// "service_dynf5hg", +// "template_l4ik4he", +// form.current, +// "rRjr_WNgPp7_rGno1" +// ) +// .then( +// (result) => { +// console.log("Message sent:", result.text); +// setMessage({ +// text: t("contact.successMessage") || "Message sent successfully!", +// type: "success", +// }); +// form.current.reset(); +// setIsLoading(false); +// setTimeout(() => setMessage({ text: "", type: "" }), 5000); +// }, +// (error) => { +// console.error("Failed to send message:", error.text); +// setMessage({ +// text: +// t("contact.errorMessage") || +// "Failed to send message. Please try again.", +// type: "error", +// }); +// setIsLoading(false); +// setTimeout(() => setMessage({ text: "", type: "" }), 5000); +// } +// ); +// }; + +// return ( +// <section +// id="contact" +// 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%)" +// }} +// > +// <div className="absolute inset-0 overflow-hidden"> +// <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-[#57acd9]/30 to-transparent"></div> +// </div> + +// <div className="relative z-10 w-full max-w-6xl mx-auto"> +// <motion.div +// initial={{ y: -50, opacity: 0 }} +// animate={{ y: 0, opacity: 1 }} +// transition={{ duration: 0.8 }} +// className="text-center mb-12" +// > +// <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-[#57acd9] via-blue-200 to-[#446a85]" +// animate={{ +// backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] +// }} +// transition={{ +// 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-[#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-[#57acd9] to-[#063e5b] text-white shadow-lg" +// > +// <FaMapMarkerAlt className="text-2xl" /> +// </motion.div> + +// <div className="flex-1"> +// <h3 className="text-[#516475] lg font-bold text- mb-2"> +// {t("contact.address")} +// </h3> +// <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-[#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-[#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-[#063e5b] 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-[#57acd9] to-[#4a7c9b] 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" +// > +// <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"> +// <h3 className="text-lg font-bold text-gray-800 mb-2"> +// {t("contact.email")} +// </h3> +// <a +// href="mailto:info@TPS-STATIONS.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 +// </a> +// </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-[#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-[#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> +// <form +// ref={form} +// onSubmit={sendEmail} +// className="space-y-2" +// > +// <div className="group/field"> +// <label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]"> +// {t("contact.name")} +// </label> +// <div className="relative"> +// <input +// type="text" +// name="user_name" +// required +// 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.namePlaceholder")} +// /> +// <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 className="group/field"> +// <label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]"> +// {t("contact.email")} +// </label> +// <div className="relative"> +// <input +// type="email" +// name="user_email" +// required +// 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")} +// /> +// <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 className="group/field"> +// <label className="block mb-2 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]"> +// {t("contact.message")} +// </label> +// <div className="relative"> +// <textarea +// name="user_message" +// required +// 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]" +// placeholder={t("contact.messagePlaceholder")} +// ></textarea> +// <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> +// {message.text && ( +// <motion.div +// 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" +// ? "bg-gradient-to-r from-[#2ecc71]/20 to-[#1abc9c]/20 border border-[#2ecc71]/50 text-[#2ecc71] shadow-lg shadow-[#2ecc71]/20" +// : "bg-gradient-to-r from-[#e74c3c]/20 to-[#c0392b]/20 border border-[#e74c3c]/50 text-[#e74c3c] shadow-lg shadow-[#e74c3c]/20" +// }`} +// > +// <div className="flex items-center justify-center gap-2"> +// {message.type === "success" ? ( +// <svg +// className="w-5 h-5" +// fill="none" +// stroke="currentColor" +// viewBox="0 0 24 24" +// > +// <path +// strokeLinecap="round" +// strokeLinejoin="round" +// strokeWidth={2} +// d="M5 13l4 4L19 7" +// /> +// </svg> +// ) : ( +// <svg +// className="w-5 h-5" +// fill="none" +// stroke="currentColor" +// viewBox="0 0 24 24" +// > +// <path +// strokeLinecap="round" +// strokeLinejoin="round" +// strokeWidth={2} +// d="M6 18L18 6M6 6l12 12" +// /> +// </svg> +// )} +// {message.text} +// </div> +// </motion.div> +// )} +// <div className="pt-2"> +// <motion.button +// type="submit" +// disabled={isLoading} +// whileHover={{ scale: 1.02 }} +// whileTap={{ scale: 0.98 }} +// 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" : "" +// }`} +// > +// <span className="relative z-10 flex items-center justify-center gap-2"> +// {isLoading ? ( +// <> +// <svg +// className="animate-spin w-5 h-5" +// fill="none" +// viewBox="0 0 24 24" +// > +// <circle +// className="opacity-25" +// cx="12" +// cy="12" +// r="10" +// stroke="currentColor" +// strokeWidth="4" +// ></circle> +// <path +// className="opacity-75" +// fill="currentColor" +// 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> +// </svg> +// {t("contact.send")}... +// </> +// ) : ( +// <> +// {t("contact.send")} +// <FaPaperPlane className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300" /> +// </> +// )} +// </span> +// {!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> +// )} +// </motion.button> +// </div> +// </form> +// <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> +// <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, #4a7c9b 0%, #063e5b 33%, #57acd9 66%, #4a7c9b 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> +// </section> +// ); +// }; + +// export default Contact; + + + + import { useTranslation } from "react-i18next"; import { FaMapMarkerAlt,