Обновлены компоненты ContactSection, Footer, Header и MobileMenu: добавлены новые телефонные номера, изменены стили для улучшения визуального восприятия и взаимодействия. В секции TeamSection добавлены новые примеры работ с описаниями и изображениями.

This commit is contained in:
albivkt
2025-07-22 21:39:16 +03:00
parent 5193fac0f6
commit a04a4cdd63
14 changed files with 147 additions and 31 deletions

BIN
public/images/dom11.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

BIN
public/images/dom22.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

BIN
public/images/dom33.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
public/images/dom44.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 467 KiB

BIN
public/images/dom55.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

BIN
public/images/dom66.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

BIN
public/images/dom77.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

BIN
public/images/dom88.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/images/dom99.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

View File

@ -100,10 +100,15 @@ const ContactSection = () => {
</svg> </svg>
</div> </div>
<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 +7 953 013 24 23
</a> </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>
</div> </div>
@ -115,9 +120,14 @@ const ContactSection = () => {
</div> </div>
<div> <div>
<p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p> <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 +7 953 013 24 23
</a> </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>
</div> </div>

View File

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

View File

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

View File

@ -7,9 +7,10 @@ import { useEffect } from 'react';
interface MobileMenuProps { interface MobileMenuProps {
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
onCallbackClick?: () => void;
} }
const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => { const MobileMenu = ({ isOpen, onClose, onCallbackClick }: MobileMenuProps) => {
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
@ -34,8 +35,7 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
</svg> </svg>
</div> </div>
<div className="text-white"> <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> </div>
</Link> </Link>
<button <button
@ -86,16 +86,27 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
</nav> </nav>
<div className="mt-auto pb-8"> <div className="mt-auto pb-8">
<div className="space-y-2 mb-4">
<a <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" /> <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>
<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>
<div className="text-sm text-gray-300 mb-6">Пн - Вс с 8:00 до 20:00</div> <div className="text-sm text-gray-300 mb-6">Пн - Вс с 8:00 до 20:00</div>
<button <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" 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"
> >
Оставить заявку Оставить заявку

View File

@ -55,6 +55,78 @@ const workExamples = [
area: '110 кв.м', area: '110 кв.м',
material: 'Каркасная технология', 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 = [ const additionalServices = [