239 lines
8.2 KiB
TypeScript
239 lines
8.2 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Code2,
|
|
Database,
|
|
Globe2,
|
|
Smartphone,
|
|
Server,
|
|
Users,
|
|
Shield,
|
|
Settings,
|
|
CheckCircle,
|
|
} from "lucide-react";
|
|
import { Link } from "react-router-dom";
|
|
import { useLanguage } from "../context/LanguageContext";
|
|
|
|
const Services: React.FC = () => {
|
|
const { t } = useLanguage();
|
|
|
|
const services = [
|
|
{
|
|
icon: <Code2 className="w-12 h-12 text-blue-600" />,
|
|
title: t("services.software.title"),
|
|
description: t("services.software.desc"),
|
|
features: [
|
|
t("services.software.features.analysis"),
|
|
t("services.software.features.design"),
|
|
t("services.software.features.development"),
|
|
t("services.software.features.testing"),
|
|
t("services.software.features.maintenance"),
|
|
],
|
|
},
|
|
{
|
|
icon: <Users className="w-12 h-12 text-purple-600" />,
|
|
title: t("services.web.title"),
|
|
description: t("services.web.desc"),
|
|
features: [
|
|
t("services.web.features.frontend"),
|
|
t("services.web.features.backend"),
|
|
t("services.web.features.api"),
|
|
t("services.web.features.seo"),
|
|
t("services.web.features.performance"),
|
|
],
|
|
},
|
|
{
|
|
icon: <Shield className="w-12 h-12 text-green-600" />,
|
|
title: t("services.mobile.title"),
|
|
description: t("services.mobile.desc"),
|
|
features: [
|
|
t("services.mobile.features.design"),
|
|
t("services.mobile.features.native"),
|
|
t("services.mobile.features.cross"),
|
|
t("services.mobile.features.push"),
|
|
t("services.mobile.features.store"),
|
|
],
|
|
},
|
|
{
|
|
icon: <Server className="w-12 h-12 text-red-600" />,
|
|
title: t("services.database.title"),
|
|
description: t("services.database.desc"),
|
|
features: [
|
|
t("services.database.features.design"),
|
|
t("services.database.features.optimization"),
|
|
t("services.database.features.migration"),
|
|
t("services.database.features.backup"),
|
|
t("services.database.features.recovery"),
|
|
],
|
|
},
|
|
{
|
|
icon: <Globe2 className="w-12 h-12 text-yellow-600" />,
|
|
title: t("services.integration.title"),
|
|
description: t("services.integration.desc"),
|
|
features: [
|
|
t("services.integration.features.api"),
|
|
t("services.integration.features.middleware"),
|
|
t("services.integration.features.legacy"),
|
|
t("services.integration.features.realtime"),
|
|
t("services.integration.features.monitoring"),
|
|
],
|
|
},
|
|
{
|
|
icon: <Settings className="w-12 h-12 text-indigo-600" />,
|
|
title: t("services.consulting.title"),
|
|
description: t("services.consulting.desc"),
|
|
features: [
|
|
t("services.consulting.features.tech"),
|
|
t("services.consulting.features.project"),
|
|
t("services.consulting.features.digital"),
|
|
t("services.consulting.features.risk"),
|
|
t("services.consulting.features.training"),
|
|
],
|
|
},
|
|
];
|
|
|
|
const supportPlans = [
|
|
{
|
|
title: t("services.support.branchRemote.title"),
|
|
price: t("services.support.branchRemote.price"),
|
|
period: t("services.support.branchRemote.period"),
|
|
features: [
|
|
t("services.support.branchRemote.features.priority"),
|
|
t("services.support.branchRemote.features.remote"),
|
|
t("services.support.branchRemote.features.optimization"),
|
|
t("services.support.branchRemote.features.maintenance"),
|
|
t("services.support.branchRemote.features.consulting"),
|
|
],
|
|
},
|
|
{
|
|
title: t("services.support.backup.title"),
|
|
price: t("services.support.backup.price"),
|
|
period: t("services.support.backup.period"),
|
|
features: [
|
|
t("services.support.backup.features.daily"),
|
|
t("services.support.backup.features.encrypted"),
|
|
t("services.support.backup.features.recovery"),
|
|
t("services.support.backup.features.verification"),
|
|
t("services.support.backup.features.access"),
|
|
],
|
|
},
|
|
{
|
|
title: t("services.support.sms.title"),
|
|
price: t("services.support.sms.price"),
|
|
period: t("services.support.sms.period"),
|
|
features: [
|
|
t("services.support.sms.features.packages"),
|
|
t("services.support.sms.features.bulk"),
|
|
t("services.support.sms.features.template"),
|
|
t("services.support.sms.features.reporting"),
|
|
t("services.support.sms.features.api"),
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Hero Section */}
|
|
<div className="relative bg-blue-900 text-white py-24">
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundImage:
|
|
'url("https://images.pexels.com/photos/3183173/pexels-photo-3183173.jpeg?auto=compress&cs=tinysrgb&w=1920")',
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
}}
|
|
></div>
|
|
<div className="container mx-auto pt-16 px-4 relative">
|
|
<h1 className="text-5xl font-bold mb-6">{t("services.title")}</h1>
|
|
<p className="text-xl max-w-3xl">{t("services.subtitle")}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Services Grid */}
|
|
<div className="py-16">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{services.map((service, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow"
|
|
>
|
|
<div className="mb-6">{service.icon}</div>
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">{service.description}</p>
|
|
<ul className="space-y-2">
|
|
{service.features.map((feature, fIndex) => (
|
|
<li
|
|
key={fIndex}
|
|
className="flex items-center text-gray-700"
|
|
>
|
|
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Support Plans */}
|
|
<div className="bg-white py-10">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="text-3xl font-bold text-center mb-10">
|
|
{t("services.support.title")}
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{supportPlans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-xl shadow-lg p-8 border border-gray-200"
|
|
>
|
|
<h3 className="text-xl font-bold mb-4">{plan.title}</h3>
|
|
|
|
<ul className="space-y-3 mb-8">
|
|
{plan.features.map((feature, fIndex) => (
|
|
<li
|
|
key={fIndex}
|
|
className="flex items-center space-x-2 text-gray-700"
|
|
>
|
|
<CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link
|
|
to="/contact"
|
|
className="block text-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
{t("services.support.contactButton")}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call to Action */}
|
|
<div className="bg-blue-900 text-white py-16">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="text-3xl font-bold mb-6">{t("services.cta.title")}</h2>
|
|
<p className="text-xl mb-8 max-w-2xl mx-auto">
|
|
{t("services.cta.description")}
|
|
</p>
|
|
<Link
|
|
to="/contact"
|
|
className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
|
|
>
|
|
{t("services.cta.contact")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Services;
|