translation
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import d20 from "../../../../src/assets/Images/d20.jpeg";
|
||||
import d31 from "../../../../src/assets/Images/d31.jpeg";
|
||||
import d32 from "../../../../src/assets/Images/d32.jpeg";
|
||||
@ -9,6 +10,10 @@ function ProjectsTimeline({
|
||||
mainTitle = "المشاريع المنفذة",
|
||||
subtitle = "خط زمني شامل للأعمال والإنجازات",
|
||||
plain = false,
|
||||
dir = "rtl",
|
||||
scrollLabel = "خط زمني قابل للتمرير",
|
||||
prevLabel = "السابق",
|
||||
nextLabel = "التالي"
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const scrollRef = useRef(null);
|
||||
@ -190,7 +195,7 @@ function ProjectsTimeline({
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.projects-timeline-root { direction: ${dir}; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
@ -246,7 +251,7 @@ function ProjectsTimeline({
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`} dir={dir}>
|
||||
<style>{css}</style>
|
||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||
<div className="h-full flex flex-col">
|
||||
@ -260,7 +265,7 @@ function ProjectsTimeline({
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
|
||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={scrollLabel}>
|
||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||
{projects.map((project, idx) => (
|
||||
@ -290,8 +295,8 @@ function ProjectsTimeline({
|
||||
</div>
|
||||
|
||||
<div className="scroll-indicator">
|
||||
<button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
|
||||
<button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
|
||||
<button className="scroll-btn" aria-label={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
|
||||
<button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -300,93 +305,75 @@ function ProjectsTimeline({
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{
|
||||
year: "1999-2009",
|
||||
items: [
|
||||
"المنشآت المعدنية لمعامل درفلة الحديد: معامل الوهيب - العربية - الدولية",
|
||||
"أعمال تصنيع وإمداد هياكل ومكونات خطوط درفلة وحدات الحديد",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2015",
|
||||
items: [
|
||||
"تنفيذ الأعمال المعدنية لمشروع إنشاء مصنع الأسمنت المتحدة",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2021",
|
||||
items: [
|
||||
"تصنيع وتنفيذ هياكل معدنية وروافع جسرية وخزانات مياه صناعية",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2022",
|
||||
items: [
|
||||
"تنفيذ هنغارات معدنية وإسمنتية عالية التحصين",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/* DepartmentDetail7 component: معدّل لاستخدام i18n */
|
||||
export default function DepartmentDetail7() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const isRTL = i18n.dir() === "rtl";
|
||||
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||
{ id: 2, title: "الاعمال المنفذة", key: "works" },
|
||||
// صور البطل
|
||||
const heroImages = {
|
||||
default: d20,
|
||||
expertise: d31,
|
||||
works: d32
|
||||
};
|
||||
|
||||
// جلب الأزرار/البيانات من الترجمة
|
||||
const buttons = t("departmentDetail7.buttons", { returnObjects: true });
|
||||
const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true });
|
||||
const expertiseTexts = t("departmentDetail7.expertiseItems", { returnObjects: true });
|
||||
const hero = t("departmentDetail7.hero", { returnObjects: true });
|
||||
const ui = t("departmentDetail7.ui", { returnObjects: true });
|
||||
const backToMenu = t("departmentDetail7.backToMenu");
|
||||
|
||||
// أيقونات ثابتة (مثل الملف الأصلي) — سنطابقها مع النصوص حسب الترتيب
|
||||
const icons = [
|
||||
(
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
),
|
||||
(
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" 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>
|
||||
),
|
||||
(
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
|
||||
</svg>
|
||||
),
|
||||
(
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
),
|
||||
(
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
)
|
||||
];
|
||||
|
||||
const expertiseItems = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصميم وتصنيع وتنفيذ الهياكل المعدنية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" 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>
|
||||
),
|
||||
text: "تنفيذ الأعمال المعدنية للمصانع والمنشآت الصناعية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصنيع وتركيب الروافع الجسرية المتحركة والثابتة."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصنيع خزانات المياه الصناعية وخزانات الفايبر."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تقديم حلول دعم صناعي متكاملة للمشاريع الكبرى."
|
||||
},
|
||||
];
|
||||
// خلق عناصر الخدمات بدمج الأيقونات مع النصوص (نحافظ على ترتيب الأيقونات كما في النسخة الأصلية)
|
||||
const expertiseItems = expertiseTexts.map((text, idx) => {
|
||||
const icon = icons[idx] || icons[icons.length - 1]; // fallback للأيقونة الأخيرة إن نقصت
|
||||
return { icon, text };
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// تهيئة أي شيء عند تغير اللغة إن احتجنا (لا تغيير للواجهة هنا)
|
||||
}, [i18n.language]);
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
const heroImage = active === "expertise" ? d31 : active === "works" ? d32 : d20;
|
||||
const heroImage = active === "expertise" ? heroImages.expertise : active === "works" ? heroImages.works : heroImages.default;
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
|
||||
<div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
|
||||
<section className="relative">
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
@ -400,7 +387,7 @@ export default function DepartmentDetail7() {
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="قسم الأعمال المعدنية"
|
||||
alt={hero.heroAlt}
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
@ -415,22 +402,20 @@ export default function DepartmentDetail7() {
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{active === "expertise" ? (
|
||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">قسم الاعمال المعدنية والدعم الصناعي</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||
يختص هذا القسم بتنفيذ وتصنيع الأعمال المعدنية والداعمة للمشاريع الصناعية والخدمية، ويشمل:
|
||||
</p>
|
||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.expertiseBadge}</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.expertiseTitle}</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.expertiseSubtitle}</p>
|
||||
</motion.div>
|
||||
) : active === "works" ? (
|
||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الأعمال المنفذة</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الأعمال المنفذة</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض لمشروعاتنا وأمثلة على الأعمال المعدنية المنفذة عبر السنين.</p>
|
||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.worksBadge}</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.worksTitle}</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.worksSubtitle}</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم الاعمال المعدنية والدعم الصناعي</h2>
|
||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{hero.defaultTitle}</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
@ -458,7 +443,7 @@ export default function DepartmentDetail7() {
|
||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={() => handleButtonClick(b.key)}
|
||||
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
|
||||
className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
||||
@ -470,7 +455,7 @@ export default function DepartmentDetail7() {
|
||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||
<span>انقر للاطّلاع على التفاصيل</span>
|
||||
<span>{ui.clickToView}</span>
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
@ -513,14 +498,14 @@ export default function DepartmentDetail7() {
|
||||
transition={{ delay: index * 0.05, duration: 0.35 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
onClick={() => handleButtonClick(b.key)}
|
||||
className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
|
||||
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
|
||||
>
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
|
||||
{b.id}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
|
||||
<p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
|
||||
<p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
|
||||
</div>
|
||||
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
@ -539,24 +524,33 @@ export default function DepartmentDetail7() {
|
||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : active === "works" ? (
|
||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
<span>{backToMenu}</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
<ProjectsTimeline projects={defaultProjects} plain={true} />
|
||||
<ProjectsTimeline
|
||||
projects={projectsTimeline}
|
||||
plain={true}
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
mainTitle={hero.worksTitle}
|
||||
subtitle={hero.worksSubtitle}
|
||||
scrollLabel={t("departmentDetail7.scroll.ariaLabel")}
|
||||
prevLabel={t("departmentDetail7.scroll.prev")}
|
||||
nextLabel={t("departmentDetail7.scroll.next")}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
<span>{backToMenu}</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
@ -593,7 +587,7 @@ export default function DepartmentDetail7() {
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
|
||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs sm:text-sm font-medium">للمزيد من الأمثلة راجع قسم "الأعمال المنفذة".</span>
|
||||
<span className="text-xs sm:text-sm font-medium">{ui.servicesProfessional}</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user