354 lines
17 KiB
TypeScript
354 lines
17 KiB
TypeScript
'use client';
|
||
|
||
import Image from 'next/image';
|
||
import { useState } from 'react';
|
||
import FadeInSection from './FadeInSection';
|
||
import CallbackModal from './CallbackModal';
|
||
import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
|
||
|
||
const workExamples = [
|
||
{
|
||
id: 1,
|
||
title: 'Дом из керамзитобетона',
|
||
description: 'Московская область, г. Люберцы, дом из керамзит бетона',
|
||
image: '/images/dom1.jpeg',
|
||
area: '100 кв.м',
|
||
material: 'Керамзитобетон',
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Дом из пенобетонных блоков',
|
||
description: 'г. Чебоксары, Альгешево, дом 75 м2 из пенобетонных блоков',
|
||
image: '/images/dom2.jpg',
|
||
area: '75 кв.м',
|
||
material: 'Пенобетонные блоки',
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'Кирпичный дом',
|
||
description: 'г. Чебоксары, ул. Гражданская, дом 120 м2 из кирпича',
|
||
image: '/images/dom3.jpg',
|
||
area: '120 кв.м',
|
||
material: 'Кирпич',
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Дом из керамзитбетонных блоков',
|
||
description: 'пос. Кугеси, дом 175 м2 из керамзитбетонных блоков',
|
||
image: '/images/dom4.jpg',
|
||
area: '175 кв.м',
|
||
material: 'Керамзитбетонные блоки',
|
||
},
|
||
{
|
||
id: 5,
|
||
title: 'Дом из керамзитбетонных блоков',
|
||
description: 'г. Чебоксары, ул. Лунная, дом 110 м2 из керамзитбетонных блоков',
|
||
image: '/images/dom5.jpg',
|
||
area: '110 кв.м',
|
||
material: 'Керамзитбетонные блоки',
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '2х этажный каркасный дом',
|
||
description: 'г. Чебоксары, Южный поселок, 2х этажный каркасный дом',
|
||
image: '/images/dom6.jpeg',
|
||
area: '110 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 7,
|
||
title: 'Монтаж фундамента',
|
||
description: 'г. Чебоксары, мкр Садовый, монтаж фундамента многоквартирного дома',
|
||
image: '/images/dom11.jpeg',
|
||
area: '-',
|
||
material: 'Фундаментные работы',
|
||
},
|
||
{
|
||
id: 8,
|
||
title: 'Монтаж систем отопления',
|
||
description: 'Город Чебоксары, пр. Г.Айги, д. 15-1, монтаж систем отопления',
|
||
image: '/images/dom22.jpeg',
|
||
area: '-',
|
||
material: 'Отопительные системы',
|
||
},
|
||
{
|
||
id: 9,
|
||
title: 'Деревянный каркасный дом',
|
||
description: 'Г.Чебоксары п. Альгешево, 100 м2',
|
||
image: '/images/dom33.jpg',
|
||
area: '100 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 10,
|
||
title: 'Деревянный каркасный дом',
|
||
description: 'г. Мариинский Посад, 80 м2',
|
||
image: '/images/dom44.jpg',
|
||
area: '80 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 11,
|
||
title: 'Деревянный каркасный дом',
|
||
description: 'г. Цивильск, 80 м2',
|
||
image: '/images/dom55.jpg',
|
||
area: '80 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 12,
|
||
title: 'Деревянный каркасный дом',
|
||
description: 'с. Комсомольское, 78 м2',
|
||
image: '/images/dom66.jpg',
|
||
area: '78 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 13,
|
||
title: 'Деревянный каркасный дом',
|
||
description: 'Сосновка, 92 м2',
|
||
image: '/images/dom77.jpg',
|
||
area: '92 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 14,
|
||
title: 'Деревянный каркасный дом',
|
||
description: 'пос. Кугеси 110 м2',
|
||
image: '/images/dom88.webp',
|
||
area: '110 кв.м',
|
||
material: 'Каркасная технология',
|
||
},
|
||
{
|
||
id: 15,
|
||
title: 'Дом из керамзитбетонных блоков',
|
||
description: 'пос. Кугеси, дом 78 м2 из керамзитбетонных блоков',
|
||
image: '/images/dom99.jpg',
|
||
area: '78 кв.м',
|
||
material: 'Керамзитбетонные блоки',
|
||
},
|
||
];
|
||
|
||
const additionalServices = [
|
||
{
|
||
id: 1,
|
||
icon: Droplets,
|
||
title: 'Монтаж водоснабжения',
|
||
description: 'Проектирование и установка систем водоснабжения с использованием качественных материалов',
|
||
features: ['Холодное и горячее водоснабжение', 'Установка счетчиков', 'Гарантия на работы'],
|
||
image: '/images/voda.jpeg'
|
||
},
|
||
{
|
||
id: 2,
|
||
icon: Wrench,
|
||
title: 'Монтаж канализации',
|
||
description: 'Полный комплекс работ по устройству канализационных систем',
|
||
features: ['Внутренняя канализация', 'Наружные сети', 'Септики и очистные сооружения'],
|
||
image: '/images/kanal.jpg'
|
||
},
|
||
{
|
||
id: 3,
|
||
icon: Zap,
|
||
title: 'Монтаж электрики',
|
||
description: 'Электромонтажные работы любой сложности с соблюдением всех норм безопасности',
|
||
features: ['Внутренняя проводка', 'Электрощиты', 'Освещение и розетки'],
|
||
image: '/images/electro.jpg'
|
||
},
|
||
{
|
||
id: 4,
|
||
icon: Thermometer,
|
||
title: 'Монтаж отопления',
|
||
description: 'Установка современных систем отопления для комфортного проживания',
|
||
features: ['Радиаторное отопление', 'Теплые полы', 'Котельное оборудование'],
|
||
image: '/images/otop.jpg'
|
||
},
|
||
];
|
||
|
||
const WorkExamplesSection = () => {
|
||
const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
|
||
|
||
return (
|
||
<section className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-tl from-indigo-50 via-white to-blue-50 overflow-hidden">
|
||
{/* Технический фон */}
|
||
<div className="absolute inset-0 opacity-25">
|
||
{/* Инструменты стилизованные */}
|
||
<div className="absolute top-12 left-12 w-4 sm:w-6 h-4 sm:h-6 border-2 border-blue-400 transform rotate-45 opacity-30"></div>
|
||
<div className="absolute top-1/4 right-16 w-6 sm:w-8 h-1 sm:h-2 bg-indigo-400 rounded opacity-35"></div>
|
||
<div className="absolute bottom-20 left-1/5 w-1 sm:w-2 h-6 sm:h-8 bg-cyan-400 rounded opacity-40"></div>
|
||
|
||
{/* Гайки и болты */}
|
||
<div className="absolute top-1/3 left-1/3 w-3 sm:w-4 h-3 sm:h-4 border border-blue-500 rounded-full opacity-25"></div>
|
||
<div className="absolute bottom-1/3 right-1/4 w-2 sm:w-3 h-2 sm:h-3 bg-indigo-500 rounded-sm opacity-30"></div>
|
||
|
||
{/* Технические линии */}
|
||
<div className="absolute top-0 left-1/4 w-px h-1/2 bg-gradient-to-b from-blue-300 to-transparent opacity-30"></div>
|
||
<div className="absolute bottom-0 right-1/3 w-px h-1/3 bg-gradient-to-t from-indigo-300 to-transparent opacity-25"></div>
|
||
<div className="absolute top-1/3 left-0 w-1/3 h-px bg-gradient-to-r from-cyan-300 to-transparent opacity-20"></div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 sm:px-6 relative z-10">
|
||
{/* Заголовок секции */}
|
||
<FadeInSection as="div" className="text-center mb-12 sm:mb-16">
|
||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||
Примеры работ
|
||
</h2>
|
||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||
</FadeInSection>
|
||
|
||
<FadeInSection as="p" className="text-base sm:text-lg text-gray-600 text-center mb-8 sm:mb-12 max-w-2xl mx-auto" delay={0.2}>
|
||
Реальные проекты, которые мы успешно реализовали для наших клиентов
|
||
</FadeInSection>
|
||
|
||
{/* Карточки примеров работ */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 mb-12 sm:mb-16 lg:mb-20">
|
||
{workExamples.map((example, index) => (
|
||
<FadeInSection
|
||
key={example.id}
|
||
as="div"
|
||
className="group relative rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2 overflow-hidden"
|
||
delay={0.3 + (index * 0.1)}
|
||
>
|
||
{/* Фон */}
|
||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
|
||
<div className="relative z-10">
|
||
{/* Изображение */}
|
||
<div className="relative h-40 sm:h-48 w-full overflow-hidden rounded-t-2xl">
|
||
<Image
|
||
src={example.image}
|
||
alt={example.title}
|
||
fill
|
||
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||
unoptimized={true}
|
||
/>
|
||
{/* Градиент поверх изображения */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
|
||
|
||
{/* Бейдж с материалом */}
|
||
<div className="absolute top-3 sm:top-4 left-3 sm:left-4 px-2 sm:px-3 py-1 bg-blue-500/80 backdrop-blur-sm rounded-full text-white text-xs sm:text-sm font-medium">
|
||
{example.material}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контент */}
|
||
<div className="p-4 sm:p-6">
|
||
<h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
|
||
{example.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm mb-3 sm:mb-4 leading-relaxed">
|
||
{example.description}
|
||
</p>
|
||
|
||
{/* Характеристики */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||
<span className="text-gray-500 text-xs sm:text-sm">Площадь:</span>
|
||
<span className="text-gray-800 text-xs sm:text-sm font-medium">{example.area}</span>
|
||
</div>
|
||
<div className="px-2 sm:px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium">
|
||
Завершен
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Декоративный элемент */}
|
||
<div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
</FadeInSection>
|
||
))}
|
||
</div>
|
||
|
||
{/* Дополнительные услуги */}
|
||
<div id="additional-services">
|
||
<FadeInSection as="div" className="mb-16" delay={0.8}>
|
||
<div className="text-center mb-8 sm:mb-12">
|
||
<h3 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||
Дополнительные услуги
|
||
</h3>
|
||
<div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||
{additionalServices.map((service, index) => (
|
||
<FadeInSection
|
||
key={service.id}
|
||
as="div"
|
||
className="group relative rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2 overflow-hidden"
|
||
delay={0.9 + (index * 0.1)}
|
||
>
|
||
{/* Фон */}
|
||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
|
||
<div className="relative z-10">
|
||
{/* Изображение */}
|
||
<div className="relative h-32 sm:h-40 w-full overflow-hidden rounded-t-2xl">
|
||
<Image
|
||
src={service.image}
|
||
alt={service.title}
|
||
fill
|
||
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
|
||
unoptimized={true}
|
||
/>
|
||
{/* Градиент поверх изображения */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
|
||
|
||
{/* Иконка поверх изображения */}
|
||
<div className="absolute top-3 sm:top-4 left-3 sm:left-4 w-10 sm:w-12 h-10 sm:h-12 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||
<service.icon className="w-5 sm:w-6 h-5 sm:h-6 text-white" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контент */}
|
||
<div className="p-4 sm:p-6 text-center">
|
||
<h4 className="text-lg sm:text-xl font-bold text-gray-800 mb-3 sm:mb-4 group-hover:text-blue-600 transition-colors duration-300">
|
||
{service.title}
|
||
</h4>
|
||
|
||
<p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
|
||
<ul className="space-y-2 sm:space-y-3">
|
||
{service.features.map((feature, featureIndex) => (
|
||
<li key={featureIndex} className="flex items-center text-xs sm:text-sm text-gray-500">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full mr-2 sm:mr-3"></div>
|
||
{feature}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Декоративный элемент */}
|
||
<div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
</FadeInSection>
|
||
))}
|
||
</div>
|
||
</FadeInSection>
|
||
</div>
|
||
|
||
{/* Призыв к действию */}
|
||
<FadeInSection as="div" delay={1.2} className="text-center mt-16">
|
||
<button
|
||
onClick={() => setIsCallbackModalOpen(true)}
|
||
className="inline-flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-300 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer hover:from-blue-500/30 hover:to-purple-500/30"
|
||
>
|
||
<span className="text-gray-800 font-medium">Помощь в подборе земельного участка, юридическое сопровождение</span>
|
||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||
</button>
|
||
</FadeInSection>
|
||
</div>
|
||
|
||
{/* Модальное окно */}
|
||
<CallbackModal
|
||
isOpen={isCallbackModalOpen}
|
||
onClose={() => setIsCallbackModalOpen(false)}
|
||
/>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default WorkExamplesSection;
|