Compare commits
2 Commits
1ceda7c291
...
08e9b252ef
Author | SHA1 | Date | |
---|---|---|---|
08e9b252ef | |||
738193fa1d |
@ -76,6 +76,11 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleNext = () => {
|
const handleNext = () => {
|
||||||
|
if (step === 1 && !material) return;
|
||||||
|
if (step === 2 && !area) return;
|
||||||
|
if (step === 3 && !finish) return;
|
||||||
|
if (step === 4 && !finance) return;
|
||||||
|
|
||||||
if (step === 4) {
|
if (step === 4) {
|
||||||
handleSubmitCalculator();
|
handleSubmitCalculator();
|
||||||
return;
|
return;
|
||||||
@ -83,7 +88,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
setStep((s) => s + 1);
|
setStep((s) => s + 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePrevious = () => {
|
const handlePrev = () => {
|
||||||
setStep((s) => s - 1);
|
setStep((s) => s - 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -289,15 +294,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
{step === 5 && (
|
{step === 5 && (
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="mb-6 sm:mb-8">
|
<div className="mb-6 sm:mb-8">
|
||||||
<div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">🏠</div>
|
<div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">✅</div>
|
||||||
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||||
Расчет готов!
|
Спасибо за заявку!
|
||||||
</h2>
|
</h2>
|
||||||
<div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
|
<div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
|
||||||
{calculatePrice().toLocaleString()} ₽
|
{calculatePrice().toLocaleString()} ₽
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm sm:text-base text-gray-300">
|
<p className="text-sm sm:text-base text-gray-300">
|
||||||
Итоговая стоимость строительства
|
Мы свяжемся с вами в ближайшее время
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -328,7 +333,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
<div className="flex justify-between items-center mt-6 sm:mt-8">
|
<div className="flex justify-between items-center mt-6 sm:mt-8">
|
||||||
{step > 1 && step < 5 && (
|
{step > 1 && step < 5 && (
|
||||||
<button
|
<button
|
||||||
onClick={handlePrevious}
|
onClick={handlePrev}
|
||||||
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 transition-all duration-300 hover:scale-105 text-sm sm:text-base"
|
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 transition-all duration-300 hover:scale-105 text-sm sm:text-base"
|
||||||
>
|
>
|
||||||
<ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
|
<ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||||
@ -336,7 +341,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{step < 4 ? (
|
{step < 4 && (
|
||||||
<button
|
<button
|
||||||
onClick={handleNext}
|
onClick={handleNext}
|
||||||
disabled={!canProceed()}
|
disabled={!canProceed()}
|
||||||
@ -345,7 +350,9 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
<span>Далее</span>
|
<span>Далее</span>
|
||||||
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
|
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||||
</button>
|
</button>
|
||||||
) : step === 4 ? (
|
)}
|
||||||
|
|
||||||
|
{step === 4 && (
|
||||||
<button
|
<button
|
||||||
onClick={handleNext}
|
onClick={handleNext}
|
||||||
disabled={!canProceed() || isSubmitting}
|
disabled={!canProceed() || isSubmitting}
|
||||||
@ -354,12 +361,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
<span>{isSubmitting ? 'Отправка...' : 'Рассчитать'}</span>
|
<span>{isSubmitting ? 'Отправка...' : 'Рассчитать'}</span>
|
||||||
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
|
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||||
</button>
|
</button>
|
||||||
) : (
|
)}
|
||||||
|
|
||||||
|
{step === 5 && (
|
||||||
<button
|
<button
|
||||||
onClick={closeModal}
|
onClick={closeModal}
|
||||||
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
|
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 mx-auto text-sm sm:text-base"
|
||||||
>
|
>
|
||||||
<span>Готово</span>
|
<span>Закрыть</span>
|
||||||
<Check className="w-4 h-4 sm:w-5 sm:h-5" />
|
<Check className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
@ -9,51 +9,51 @@ import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
|
|||||||
const workExamples = [
|
const workExamples = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: 'Дом из пеноблоков',
|
title: 'Каркасный дом',
|
||||||
description: 'Г.Чебоксары п. Альгешево, 100 м2',
|
description: 'Г.Чебоксары п. Альгешево, 100 м2',
|
||||||
image: '/images/koroche.jpg',
|
image: '/images/koroche.jpg',
|
||||||
area: '100 кв.м',
|
area: '100 кв.м',
|
||||||
material: 'Пеноблоки',
|
material: 'Каркасная технология',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: 'Дом из пеноблоков',
|
title: 'Каркасный дом',
|
||||||
description: 'г. Мариинский Посад, 80 м2',
|
description: 'г. Мариинский Посад, 80 м2',
|
||||||
image: '/images/koroche2.jpg',
|
image: '/images/koroche2.jpg',
|
||||||
area: '80 кв.м',
|
area: '80 кв.м',
|
||||||
material: 'Пеноблоки',
|
material: 'Каркасная технология',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: 'Дом из пеноблоков',
|
title: 'Каркасный дом',
|
||||||
description: 'г. Цивильск, 80 м2',
|
description: 'г. Цивильск, 80 м2',
|
||||||
image: '/images/koroche3.jpg',
|
image: '/images/koroche3.jpg',
|
||||||
area: '80 кв.м',
|
area: '80 кв.м',
|
||||||
material: 'Пеноблоки',
|
material: 'Каркасная технология',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: 'Дом из пеноблоков',
|
title: 'Каркасный дом',
|
||||||
description: 'с. Комсомольское, 78 м2',
|
description: 'с. Комсомольское, 78 м2',
|
||||||
image: '/images/koroche4.jpg',
|
image: '/images/koroche4.jpg',
|
||||||
area: '78 кв.м',
|
area: '78 кв.м',
|
||||||
material: 'Пеноблоки',
|
material: 'Каркасная технология',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: 'Дом из пеноблоков',
|
title: 'Каркасный дом',
|
||||||
description: 'Сосновка, 92 м2',
|
description: 'Сосновка, 92 м2',
|
||||||
image: '/images/koroche5.jpg',
|
image: '/images/koroche5.jpg',
|
||||||
area: '92 кв.м',
|
area: '92 кв.м',
|
||||||
material: 'Пеноблоки',
|
material: 'Каркасная технология',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
title: 'Дом из пеноблоков',
|
title: 'Каркасный дом',
|
||||||
description: 'пос. Кугеси 110 м2',
|
description: 'пос. Кугеси 110 м2',
|
||||||
image: '/images/koroche6.webp',
|
image: '/images/koroche6.webp',
|
||||||
area: '110 кв.м',
|
area: '110 кв.м',
|
||||||
material: 'Пеноблоки',
|
material: 'Каркасная технология',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user