Added translation
This commit is contained in:
@ -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