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

2025-07-23 17:00:13 +03:00
parent 453c372969
commit ee11060a17
6 changed files with 41 additions and 13 deletions
--- a/public/images/un2.png
+++ b/public/images/un2.png
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -97,7 +97,19 @@ export default function Home() {
            {/* Left Content */}
                         <FadeInSection as="div" className="flex-1 text-white text-center lg:text-left" delay={0.2}>
              
-                             <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">
+              {/* Блок с локацией и Яндексом */}
+              <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">
                 СТРОИТЕЛЬСТВО КАМЕННЫХ<br />
                 И КАРКАСНЫХ ДОМОВ<br />
                 С ФИКСАЦИЕЙ ЦЕНЫ
--- a/src/components/ContactSection.tsx
+++ b/src/components/ContactSection.tsx
@ -103,8 +103,8 @@ const ContactSection = () => {
                    <p className="text-gray-600 text-sm sm:text-base mb-1">Телефоны</p>
                    <div className="space-y-1">
                      <a href="tel:+79530132423" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
-                        +7 953 013 24 23
-                      </a>
+                      +7 953 013 24 23
+                    </a>
                      <a href="tel:+79530148606" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
                        +7 953 014 86 06
                      </a>
@ -122,8 +122,8 @@ const ContactSection = () => {
                    <p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p>
                    <div className="space-y-1">
                      <a href="https://wa.me/79530132423" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
-                        +7 953 013 24 23
-                      </a>
+                      +7 953 013 24 23
+                    </a>
                      <a href="https://wa.me/79530148606" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
                        +7 953 014 86 06
                      </a>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -4,12 +4,14 @@ import Link from 'next/link';
 import { Menu, Phone } from 'lucide-react';
 import { useState } from 'react';
 import CallbackModal from './CallbackModal';
+import HouseCalculatorModal from './HouseCalculatorModal';
 import MobileMenu from './MobileMenu';
 import FadeInOnMount from './FadeInOnMount';

 const Header = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);

  return (
    <>
@ -39,6 +41,12 @@ const Header = () => {
              <Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors font-medium">
                Услуги
              </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>
@ -93,9 +101,12 @@ const Header = () => {
            <div className="md:hidden flex items-center space-x-2">
              <button
                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
                onClick={() => setIsMobileMenuOpen(true)}
@ -119,6 +130,11 @@ const Header = () => {
        onClose={() => setIsMobileMenuOpen(false)}
        onCallbackClick={() => setIsModalOpen(true)}
      />
+
+      <HouseCalculatorModal
+        isOpen={isCalculatorOpen}
+        onClose={() => setIsCalculatorOpen(false)}
+      />
    </>
  );
 };
--- a/src/components/HouseCalculatorModal.tsx
+++ b/src/components/HouseCalculatorModal.tsx
@ -132,7 +132,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
  };

  const calculatePrice = () => {
-    let basePrice = 1500000; // Базовая цена
+    let basePrice = 1500000 * 2.5; // Базовая цена увеличена в 2.5 раза
    
    // Корректировка по площади
    if (area === '100-150 кв.м.') basePrice *= 1.3;
@ -317,7 +317,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
                  Спасибо за заявку!
                </h2>
                <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>
                <p className="text-sm sm:text-base text-gray-300">
                  Мы свяжемся с вами в ближайшее время
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@ -87,11 +87,11 @@ const MobileMenu = ({ isOpen, onClose, onCallbackClick }: MobileMenuProps) => {

        <div className="mt-auto pb-8">
          <div className="space-y-2 mb-4">
-            <a 
+          <a 
              href="tel:+79530132423" 
              className="flex items-center text-white hover:text-blue-400 transition-colors group"
-            >
-              <Phone className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
+          >
+            <Phone className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
              <span className="text-lg font-semibold">+7 953 013 24 23</span>
            </a>
            <a 
@ -99,7 +99,7 @@ const MobileMenu = ({ isOpen, onClose, onCallbackClick }: MobileMenuProps) => {
              className="flex items-center text-white hover:text-blue-400 transition-colors group ml-7"
            >
              <span className="text-lg font-semibold">+7 953 014 86 06</span>
-            </a>
+          </a>
          </div>
          <div className="text-sm text-gray-300 mb-6">Пн - Вс с 8:00 до 20:00</div>
          <button