Обновлены компоненты Home, Header и HouseCalculatorModal: добавлен блок с геолокацией на главной странице, улучшены стили и добавлены новые кнопки для калькулятора. Изменены базовые цены в модальном окне калькулятора и улучшен вывод стоимости. Исправлены отступы и стили в мобильном меню для лучшего восприятия.

This commit is contained in:
albivkt
2025-07-23 17:00:13 +03:00
parent 453c372969
commit ee11060a17
6 changed files with 41 additions and 13 deletions

BIN
public/images/un2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -97,6 +97,18 @@ export default function Home() {
{/* Left Content */} {/* Left Content */}
<FadeInSection as="div" className="flex-1 text-white text-center lg:text-left" delay={0.2}> <FadeInSection as="div" className="flex-1 text-white text-center lg:text-left" delay={0.2}>
{/* Блок с локацией и Яндексом */}
<div className="flex items-center justify-center lg:justify-start mb-4 sm:mb-6">
<div className="flex items-center bg-white/10 backdrop-blur-sm rounded-full px-4 py-2 border border-white/20">
<img
src="/images/un2.png"
alt="Геолокация"
className="w-5 h-5 sm:w-6 sm:h-6 mr-2 object-contain"
/>
<span className="text-white text-sm sm:text-base font-medium">В республике Чувашия</span>
</div>
</div>
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight"> <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight">
СТРОИТЕЛЬСТВО КАМЕННЫХ<br /> СТРОИТЕЛЬСТВО КАМЕННЫХ<br />
И КАРКАСНЫХ ДОМОВ<br /> И КАРКАСНЫХ ДОМОВ<br />

View File

@ -4,12 +4,14 @@ import Link from 'next/link';
import { Menu, Phone } from 'lucide-react'; import { Menu, Phone } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
import CallbackModal from './CallbackModal'; import CallbackModal from './CallbackModal';
import HouseCalculatorModal from './HouseCalculatorModal';
import MobileMenu from './MobileMenu'; import MobileMenu from './MobileMenu';
import FadeInOnMount from './FadeInOnMount'; import FadeInOnMount from './FadeInOnMount';
const Header = () => { const Header = () => {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
return ( return (
<> <>
@ -39,6 +41,12 @@ const Header = () => {
<Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors font-medium"> <Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors font-medium">
Услуги Услуги
</Link> </Link>
<button
onClick={() => setIsCalculatorOpen(true)}
className="text-white hover:text-blue-400 transition-colors font-medium"
>
Калькулятор
</button>
<Link href="#contact" className="text-white hover:text-blue-400 transition-colors font-medium"> <Link href="#contact" className="text-white hover:text-blue-400 transition-colors font-medium">
Контакты Контакты
</Link> </Link>
@ -93,9 +101,12 @@ const Header = () => {
<div className="md:hidden flex items-center space-x-2"> <div className="md:hidden flex items-center space-x-2">
<button <button
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-2 rounded-lg text-sm font-semibold hover:from-orange-600 hover:to-red-600 transition-all duration-300 hover:scale-105 shadow-lg" className="bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-2 rounded-lg text-xs font-semibold hover:from-orange-600 hover:to-red-600 transition-all duration-300 hover:scale-105 shadow-lg"
> >
Заказать звонок <div className="text-center">
<div>+7 953 013 24 23</div>
<div>+7 953 014 86 06</div>
</div>
</button> </button>
<button <button
onClick={() => setIsMobileMenuOpen(true)} onClick={() => setIsMobileMenuOpen(true)}
@ -119,6 +130,11 @@ const Header = () => {
onClose={() => setIsMobileMenuOpen(false)} onClose={() => setIsMobileMenuOpen(false)}
onCallbackClick={() => setIsModalOpen(true)} onCallbackClick={() => setIsModalOpen(true)}
/> />
<HouseCalculatorModal
isOpen={isCalculatorOpen}
onClose={() => setIsCalculatorOpen(false)}
/>
</> </>
); );
}; };

View File

@ -132,7 +132,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
}; };
const calculatePrice = () => { const calculatePrice = () => {
let basePrice = 1500000; // Базовая цена let basePrice = 1500000 * 2.5; // Базовая цена увеличена в 2.5 раза
// Корректировка по площади // Корректировка по площади
if (area === '100-150 кв.м.') basePrice *= 1.3; if (area === '100-150 кв.м.') basePrice *= 1.3;
@ -317,7 +317,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
Спасибо за заявку! Спасибо за заявку!
</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">
Мы свяжемся с вами в ближайшее время Мы свяжемся с вами в ближайшее время