Arsen Akhmetzyanov
fde9609f9a
- simplify main navigation and hide extra menu items - make home page more sales-focused with updated hero, benefits and fleet teaser - add RU/EN handling for home and contacts, including SEO defaults - integrate basic Strapi homepage API client (no breaking changes) - update contacts page with messenger buttons and dynamic footer year Made-with: Cursor
70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import React from 'react';
|
||
import { STEPS } from '../constants';
|
||
import { useLocation } from 'react-router-dom';
|
||
|
||
const Process: React.FC = () => {
|
||
const location = useLocation();
|
||
const isEnglish = location.pathname.startsWith('/en');
|
||
|
||
const steps = STEPS.map((step) => ({
|
||
...step,
|
||
description: isEnglish
|
||
? (() => {
|
||
switch (step.title) {
|
||
case 'Звонок':
|
||
return 'We get in touch with you, clarify all the details and agree on the price.';
|
||
case 'ТЗ':
|
||
return 'We prepare a technical assignment for our specialists.';
|
||
case 'Договор':
|
||
return 'We prepare all required documents and sign the contract.';
|
||
case 'Работа':
|
||
return 'We carry out on-site work and test collected samples.';
|
||
case 'Отчет':
|
||
return 'We prepare a technical report and hand over the full documentation package.';
|
||
case 'Финал':
|
||
return 'We present the report and provide recommendations.';
|
||
default:
|
||
return step.description;
|
||
}
|
||
})()
|
||
: step.description,
|
||
}));
|
||
|
||
return (
|
||
<div className="py-20 bg-brand-light">
|
||
<div className="container mx-auto px-6">
|
||
<h2 className="text-4xl font-bold text-gray-900 mb-16 text-center">
|
||
{isEnglish ? 'How we work' : 'Как мы работаем'}
|
||
</h2>
|
||
|
||
<div className="relative max-w-6xl mx-auto">
|
||
{/* Линия связи между шагами (только на больших экранах) */}
|
||
<div className="hidden lg:block absolute top-9 left-0 right-0 h-1 bg-gradient-to-r from-brand-orange via-brand-orange/50 to-brand-orange" style={{ zIndex: 0 }} />
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative" style={{ zIndex: 1 }}>
|
||
{steps.map((step, idx) => (
|
||
<div key={idx} className="relative">
|
||
{/* Номер шага */}
|
||
<div className="absolute -top-4 -left-4 w-10 h-10 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg z-10 border-4 border-brand-light">
|
||
{idx + 1}
|
||
</div>
|
||
|
||
{/* Карточка шага */}
|
||
<div className="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:scale-105 h-full border-2 border-transparent hover:border-brand-orange">
|
||
<div className="w-14 h-14 rounded-full bg-brand-orange/20 flex items-center justify-center text-brand-orange mb-4">
|
||
<step.icon size={28} />
|
||
</div>
|
||
<p className="text-gray-700 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Process; |