Added translation

This commit is contained in:
Rahaf
2026-01-12 15:27:19 +03:00
parent 4ee30601b5
commit ee7ceb0745
7 changed files with 1344 additions and 2084 deletions

View File

@ -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>
);
};