first commit

README.md

@@ -39,3 +39,4 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/bui
 "# yourhouse" 
 "# yourhouse" 
 "# yourhouse" 
+# yourhouse21

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
+    "dev-npx": "npx next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

src/app/page.tsx

@@ -97,7 +97,17 @@ 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="mb-6 sm:mb-8 text-center lg:text-left">
+                <div className="inline-flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2.5 border border-white/30">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-white flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-white text-sm font-medium leading-none">В республике Чувашия</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 />
                  С ФИКСАЦИЕЙ ЦЕНЫ

src/components/ContactSection.tsx

@@ -100,10 +100,15 @@ const ContactSection = () => {
                     </svg>
                   </div>
                   <div>
-                    <p className="text-gray-600 text-sm sm:text-base mb-1">Телефон</p>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Телефоны</p>
-                    <a href="tel:+79530132423" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
+                    <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>
+                      <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>
+                    </div>
                   </div>
                 </div>
                 
@@ -115,9 +120,14 @@ const ContactSection = () => {
                   </div>
                   <div>
                     <p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p>
-                    <a href="https://wa.me/79530132423" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
+                    <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>
+                      <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>
+                    </div>
                   </div>
                 </div>
                 
@@ -149,6 +159,20 @@ const ContactSection = () => {
                     </p>
                   </div>
                 </div>
+                
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-orange-500/20 rounded-full flex items-center justify-center group-hover:bg-orange-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Email</p>
+                    <a href="mailto:Vashdom121@mail.ru" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-orange-600 transition-colors duration-300">
+                      Vashdom121@mail.ru
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
 

src/components/Footer.tsx

@@ -51,7 +51,16 @@ const Footer = () => {
                   +7 953 013 24 23
                 </a>
               </li>
-              <li>info@vashdom.ru</li>
+              <li>
+                <a href="tel:+79530148606" className="hover:text-white transition-colors">
+                  +7 953 014 86 06
+                </a>
+              </li>
+              <li>
+                <a href="mailto:Vashdom121@mail.ru" className="hover:text-white transition-colors">
+                  Vashdom121@mail.ru
+                </a>
+              </li>
               <li>
                 г. Чебоксары,<br />
                 ул. Калинина, 107

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>
@@ -47,12 +55,20 @@ const Header = () => {
             {/* Contact Info & CTA */}
             <div className="hidden md:flex items-center space-x-4 lg:space-x-6 flex-shrink-0">
               <div className="text-right">
-                <a 
+                <div className="space-y-1">
-                  href="tel:+79530132423" 
+                  <a 
-                  className="flex items-center text-white hover:text-blue-400 transition-colors group text-base lg:text-lg font-semibold whitespace-nowrap"
+                    href="tel:+79530132423" 
-                >
+                    className="block text-white hover:text-blue-400 transition-colors group text-xs lg:text-sm font-semibold whitespace-nowrap"
-                  +7 953 013 24 23
+                  >
-                </a>
+                    +7 953 013 24 23
+                  </a>
+                  <a 
+                    href="tel:+79530148606" 
+                    className="block text-white hover:text-blue-400 transition-colors group text-xs lg:text-sm font-semibold whitespace-nowrap"
+                  >
+                    +7 953 014 86 06
+                  </a>
+                </div>
                 <div className="text-xs text-gray-300 mt-1">Пн - Вс с 8:00 до 20:00</div>
               </div>
               <button 
@@ -81,13 +97,25 @@ const Header = () => {
               </button>
             </div>
 
-            <button
+            {/* Кнопка для мобильных устройств */}
-              onClick={() => setIsMobileMenuOpen(true)}
+            <div className="md:hidden flex items-center space-x-2">
-              className="md:hidden text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg"
+              <button
-              aria-label="Открыть меню"
+                onClick={() => setIsModalOpen(true)}
-            >
+                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"
-              <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
+              >
-            </button>
+                <div className="text-center">
+                  <div>+7 953 013 24 23</div>
+                  <div>+7 953 014 86 06</div>
+                </div>
+              </button>
+              <button
+                onClick={() => setIsMobileMenuOpen(true)}
+                className="text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg"
+                aria-label="Открыть меню"
+              >
+                <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
+              </button>
+            </div>
           </div>
         </div>
       </FadeInOnMount>
@@ -100,6 +128,12 @@ const Header = () => {
       <MobileMenu
         isOpen={isMobileMenuOpen}
         onClose={() => setIsMobileMenuOpen(false)}
+        onCallbackClick={() => setIsModalOpen(true)}
+      />
+
+      <HouseCalculatorModal
+        isOpen={isCalculatorOpen}
+        onClose={() => setIsCalculatorOpen(false)}
       />
     </>
   );

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;
@@ -216,8 +216,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               </h2>
               <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {areas.map((a) => (
-                  <label key={a} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+                  <label key={a} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    area === a 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      area === a ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
@@ -240,10 +246,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                 Вариант отделки
               </h2>
-              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {finishOptions.map((option) => (
-                  <label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+                  <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    finish === option 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      finish === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
@@ -268,10 +280,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                 Источник финансирования
               </h2>
-              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {financeOptions.map((option) => (
-                  <label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+                  <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    finance === option 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      finance === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
@@ -299,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">
                   Мы свяжемся с вами в ближайшее время

src/components/MobileMenu.tsx

@@ -7,9 +7,10 @@ import { useEffect } from 'react';
 interface MobileMenuProps {
   isOpen: boolean;
   onClose: () => void;
+  onCallbackClick?: () => void;
 }
 
-const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
+const MobileMenu = ({ isOpen, onClose, onCallbackClick }: MobileMenuProps) => {
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
@@ -34,8 +35,7 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
                </svg>
              </div>
             <div className="text-white">
-              <div className="text-xl font-bold">SD</div>
+              <div className="text-xl font-bold">Ваш Дом</div>
-              <div className="text-sm font-semibold -mt-1">STROY</div>
             </div>
           </Link>
           <button
@@ -49,7 +49,7 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
 
         <nav className="flex-1 flex flex-col space-y-6">
           <Link 
-            href="#services" 
+            href="#additional-services" 
             className="text-xl text-white hover:text-blue-400 transition-colors py-2"
             onClick={onClose}
           >
@@ -86,16 +86,38 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
         </nav>
 
         <div className="mt-auto pb-8">
+          <div className="space-y-2 mb-4">
           <a 
-            href="tel:+78352329226" 
+              href="tel:+79530132423" 
-            className="flex items-center text-white hover:text-blue-400 transition-colors mb-2 group"
+              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" />
-            <span className="text-lg font-semibold">+7 8352 32 92 26</span>
+              <span className="text-lg font-semibold">+7 953 013 24 23</span>
+            </a>
+            <a 
+              href="tel:+79530148606" 
+              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>
-          <div className="text-sm text-gray-300 mb-6">Пн - Вс с 8:00 до 20:00</div>
+          </div>
+          <div className="text-sm text-gray-300 mb-4">Пн - Вс с 8:00 до 20:00</div>
+          <div className="mb-6">
+            <a 
+              href="mailto:Vashdom121@mail.ru" 
+              className="flex items-center text-white hover:text-blue-400 transition-colors group"
+            >
+              <svg className="w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              <span className="text-sm">Vashdom121@mail.ru</span>
+            </a>
+          </div>
           <button 
-            onClick={onClose}
+            onClick={() => {
+              onCallbackClick?.();
+              onClose();
+            }}
             className="w-full bg-white text-gray-900 px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors hover:shadow-lg font-semibold"
           >
             Оставить заявку

src/components/TeamSection.tsx

@@ -55,6 +55,78 @@ const workExamples = [
     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 = [