140 lines
6.4 KiB
JavaScript
140 lines
6.4 KiB
JavaScript
import React from "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: t("services.features.industrial.title"),
|
|
description: t("services.features.industrial.description"),
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: <Zap className="w-8 h-8" />,
|
|
title: t("services.features.residential.title"),
|
|
description: t("services.features.residential.description"),
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: <Users className="w-8 h-8" />,
|
|
title: t("services.features.infrastructure.title"),
|
|
description: t("services.features.infrastructure.description"),
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: <PieChart className="w-8 h-8" />,
|
|
title: t("services.features.maintenance.title"),
|
|
description: t("services.features.maintenance.description"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="services" >
|
|
<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="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"
|
|
>
|
|
<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 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>
|
|
<div className="flex-1">
|
|
<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 leading-relaxed text-sm">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</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 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>
|
|
<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>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Services; |