Compare commits
2 Commits
5193fac0f6
...
453c372969
Author | SHA1 | Date | |
---|---|---|---|
453c372969 | |||
a04a4cdd63 |
BIN
public/images/dom11.jpeg
Normal file
After Width: | Height: | Size: 183 KiB |
BIN
public/images/dom22.jpeg
Normal file
After Width: | Height: | Size: 150 KiB |
BIN
public/images/dom33.jpg
Normal file
After Width: | Height: | Size: 111 KiB |
BIN
public/images/dom44.jpg
Normal file
After Width: | Height: | Size: 467 KiB |
BIN
public/images/dom55.jpg
Normal file
After Width: | Height: | Size: 288 KiB |
BIN
public/images/dom66.jpg
Normal file
After Width: | Height: | Size: 224 KiB |
BIN
public/images/dom77.jpg
Normal file
After Width: | Height: | Size: 219 KiB |
BIN
public/images/dom88.webp
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
public/images/dom99.jpg
Normal file
After Width: | Height: | Size: 246 KiB |
@ -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>
|
||||||
|
|
||||||
|
@ -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 />
|
||||||
|
@ -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)}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -216,8 +216,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
|||||||
</h2>
|
</h2>
|
||||||
<div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
|
<div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
|
||||||
{areas.map((a) => (
|
{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">
|
<div className="relative z-10 flex items-center">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
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 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>
|
</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) => (
|
{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">
|
<div className="relative z-10 flex items-center">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
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 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>
|
</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) => (
|
{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">
|
<div className="relative z-10 flex items-center">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
Оставить заявку
|
Оставить заявку
|
||||||
|
@ -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 = [
|
||||||
|