Обновлены компоненты Home, Header и HouseCalculatorModal: добавлен блок с геолокацией на главной странице, улучшены стили и добавлены новые кнопки для калькулятора. Изменены базовые цены в модальном окне калькулятора и улучшен вывод стоимости. Исправлены отступы и стили в мобильном меню для лучшего восприятия.
This commit is contained in:
BIN
public/images/un2.png
Normal file
BIN
public/images/un2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
@ -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 />
|
||||||
|
@ -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)}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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">
|
||||||
Мы свяжемся с вами в ближайшее время
|
Мы свяжемся с вами в ближайшее время
|
||||||
|
Reference in New Issue
Block a user