Added translation
This commit is contained in:
Rahaf
@ -2,363 +2,51 @@ import React, { useState, useEffect, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, animateScroll as scroll } from "react-scroll";
|
||||
import { FcGlobe } from "react-icons/fc";
|
||||
import { FiSun, FiMoon, FiGlobe } from "react-icons/fi";
|
||||
import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
|
||||
|
||||
/* ----------------- Icons (unchanged) ----------------- */
|
||||
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>
|
||||
);
|
||||
|
||||
/* ----------------- ThemeToggle styles (RESTORED EXACTLY AS ORIGINAL) ----------------- */
|
||||
/* kept exactly the same as your original ThemeToggle styles so its look didn't change */
|
||||
const StyledWrapper = styled.div`
|
||||
/* Base Styles */
|
||||
.switch {
|
||||
display: inline-block;
|
||||
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;
|
||||
.theme-toggle-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: ${props => props.theme === 'dark' ? '#FFD700' : '#FF8C00'};
|
||||
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;
|
||||
padding: 0.5rem;
|
||||
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);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(255, 140, 0, 0.1)'};
|
||||
transform: scale(1.1);
|
||||
}
|
||||
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;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/* ----------------- ThemeToggle component (exactly as original) ----------------- */
|
||||
const ThemeToggle = ({ currentTheme, toggleTheme }) => {
|
||||
const isDark = currentTheme === "dark";
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<label
|
||||
role="switch"
|
||||
aria-checked={isDark}
|
||||
tabIndex={0}
|
||||
className="switch"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggleTheme();
|
||||
}
|
||||
}}
|
||||
<StyledWrapper theme={currentTheme}>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="theme-toggle-btn"
|
||||
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
aria-hidden="false"
|
||||
/>
|
||||
<span className="slider" aria-hidden="true">
|
||||
<span className="slider-inner" />
|
||||
</span>
|
||||
</label>
|
||||
{isDark ? <FiSun size={24} /> : <FiMoon size={24} />}
|
||||
</button>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
/* ----------------- Internal LanguageSwitcher (restricted to EN/AR only) ----------------- */
|
||||
const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
const LanguageSwitcher = ({ i18n }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef(null);
|
||||
const current = i18n.language?.startsWith("ar") ? "ar" : "en";
|
||||
@ -378,27 +66,28 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} className={className} style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
|
||||
<div ref={ref} style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
|
||||
<button
|
||||
type="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((s) => !s)}
|
||||
className="lang-switch-btn"
|
||||
style={{
|
||||
padding: "0.28rem 0.5rem",
|
||||
borderRadius: "0.5rem",
|
||||
padding: "0.5rem",
|
||||
borderRadius: "50%",
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
color: "inherit",
|
||||
fontWeight: 700,
|
||||
cursor: "pointer",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "all 0.3s ease",
|
||||
fontSize: "1.5rem",
|
||||
}}
|
||||
className="lang-toggle-btn"
|
||||
>
|
||||
<FcGlobe size={28} />
|
||||
<FiGlobe size={24} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
@ -420,9 +109,10 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
<button
|
||||
onClick={() => changeLng("en")}
|
||||
role="menuitem"
|
||||
className={`lang-item ${current === "en" ? "active" : ""}`}
|
||||
style={{
|
||||
display: "block",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
padding: "8px 10px",
|
||||
@ -431,16 +121,20 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
color: "inherit",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
className={`lang-item ${current === "en" ? "active" : ""}`}
|
||||
>
|
||||
English
|
||||
<span>English</span>
|
||||
{current === "en" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => changeLng("ar")}
|
||||
role="menuitem"
|
||||
className={`lang-item ${current === "ar" ? "active" : ""}`}
|
||||
style={{
|
||||
display: "block",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
padding: "8px 10px",
|
||||
@ -449,10 +143,13 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
color: "inherit",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
marginTop: 6,
|
||||
}}
|
||||
className={`lang-item ${current === "ar" ? "active" : ""}`}
|
||||
>
|
||||
العربية
|
||||
<span>العربية</span>
|
||||
{current === "ar" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@ -460,7 +157,6 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
);
|
||||
};
|
||||
|
||||
/* ----------------- Navbar component ----------------- */
|
||||
const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
@ -616,14 +312,28 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
.mobile-left-slot { display:flex; align-items:center; gap:0.5rem; }
|
||||
.mobile-right-slot { display:flex; align-items:center; gap:0.5rem; }
|
||||
|
||||
.lang-switch-btn {
|
||||
.lang-toggle-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.45rem;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.lang-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
@ -668,7 +378,7 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
|
||||
<div className="flex items-center gap-3 md:gap-5">
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<InternalLanguageSwitcher i18n={i18n} />
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
</div>
|
||||
|
||||
@ -694,14 +404,14 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<InternalLanguageSwitcher i18n={i18n} />
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<InternalLanguageSwitcher i18n={i18n} />
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
@ -765,4 +475,4 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
export default Navbar;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,455 +1,3 @@
|
||||
// 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,
|
||||
@ -510,7 +58,6 @@ 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%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
@ -554,7 +101,6 @@ 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 }}
|
||||
@ -590,8 +136,6 @@ emailjs
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* بطاقة البريد الإلكتروني - بقيت كما هي */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
|
||||
@ -1,41 +1,46 @@
|
||||
import React from "react";
|
||||
import { Wallet, Zap, Users, PieChart, ChevronRight, Sparkles } from "lucide-react";
|
||||
import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const Services = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: 1,
|
||||
icon: <Wallet className="w-8 h-8" />,
|
||||
title: "تصميم وتنفيذ خطوط إنتاج صناعية متكاملة",
|
||||
description: "تشمل قطاعات الحديد، الإسمنت، الغذائيات، الأدوية، والبلاستيك بأعلى معايير الجودة والسلامة",
|
||||
title: t("services.features.industrial.title"),
|
||||
description: t("services.features.industrial.description"),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: <Zap className="w-8 h-8" />,
|
||||
title: "تنفيذ مشاريع سكنية وخدمية متكاملة",
|
||||
description: "وحدات سكنية مسبقة الصنع، مباني خدمية وإدارية، مع الالتزام بأعلى المعايير الهندسية",
|
||||
title: t("services.features.residential.title"),
|
||||
description: t("services.features.residential.description"),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: <Users className="w-8 h-8" />,
|
||||
title: "إنشاء وصيانة مرافق البنية التحتية",
|
||||
description: "محطات الوقود، المنشآت النفطية، المحطات المائية، وأنظمة ضخ ومعالجة المياه",
|
||||
title: t("services.features.infrastructure.title"),
|
||||
description: t("services.features.infrastructure.description"),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <PieChart className="w-8 h-8" />,
|
||||
title: "تشغيل وصيانة متكاملة للمنشآت",
|
||||
description: "أنظمة أتمتة متقدمة، إدارة محطات، صيانة على مدار الساعة، وتطوير مستمر للمرافق",
|
||||
title: t("services.features.maintenance.title"),
|
||||
description: t("services.features.maintenance.description"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<div className="min-h-screen bg-transparent font-sans overflow-hidden relative" dir="rtl">
|
||||
<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="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
|
||||
@ -45,7 +50,7 @@ title: "تصميم وتنفيذ خطوط إنتاج صناعية متكاملة"
|
||||
<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="flex items-start space-x-5 rtl:space-x-reverse">
|
||||
<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>
|
||||
@ -103,29 +108,32 @@ title: "تصميم وتنفيذ خطوط إنتاج صناعية متكاملة"
|
||||
<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>
|
||||
<div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse">
|
||||
<span className="text-sm font-semibold tracking-widest text-white">
|
||||
{t("services.summary")}
|
||||
</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]">
|
||||
خدماتنا
|
||||
{t("services.pageTitle")}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl">
|
||||
خبرات تراكمية واسعة في تنفيذ المشاريع الصناعية والإنشائية
|
||||
{t("services.mainHeading")}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-white to[#57acd9] rounded-full"></div>
|
||||
<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">
|
||||
تنفيذ مشاريع متكاملة مع الشركاء بأعلى معايير الجودة والسلامة
|
||||
{t("services.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user