Compare commits

...

9 Commits

Author SHA1 Message Date
ad0b90172b first commit 2025-08-13 17:45:06 +03:00
3995f21356 Обновлены компоненты ContactSection, Footer и MobileMenu: добавлены новые ссылки на электронную почту с улучшенными стилями и иконками для повышения визуального восприятия и удобства взаимодействия. 2025-07-29 23:56:45 +03:00
7a21468c07 Добавлен новый скрипт "dev-npx" в package.json для запуска разработки с использованием npx. Обновлен блок с геолокацией на главной странице: изменены стили и добавлен SVG-иконка для улучшения визуального восприятия. 2025-07-29 02:14:23 +03:00
ee11060a17 Обновлены компоненты Home, Header и HouseCalculatorModal: добавлен блок с геолокацией на главной странице, улучшены стили и добавлены новые кнопки для калькулятора. Изменены базовые цены в модальном окне калькулятора и улучшен вывод стоимости. Исправлены отступы и стили в мобильном меню для лучшего восприятия. 2025-07-23 17:00:13 +03:00
453c372969 Обновлен компонент HouseCalculatorModal: улучшены стили для радиокнопок с добавлением эффектов при выборе, изменены классы для повышения читаемости и взаимодействия. Упрощены проверки состояния для визуальных эффектов. 2025-07-22 21:48:12 +03:00
a04a4cdd63 Обновлены компоненты ContactSection, Footer, Header и MobileMenu: добавлены новые телефонные номера, изменены стили для улучшения визуального восприятия и взаимодействия. В секции TeamSection добавлены новые примеры работ с описаниями и изображениями. 2025-07-22 21:39:16 +03:00
5193fac0f6 Удалено изображение 'stryokab.webp' и обновлены ссылки на изображения в секциях AboutSection и TeamSection. Изменены названия и описания проектов для повышения информативности. 2025-07-16 23:22:24 +03:00
08e9b252ef Resolve merge conflicts in HouseCalculatorModal.tsx 2025-07-13 22:33:36 +03:00
738193fa1d Обновлены компоненты ContactSection и HouseCalculatorModal: удалены неиспользуемые импорты, упрощены проверки на ошибки и изменены тексты для улучшения пользовательского опыта. В секции TeamSection изменены названия материалов на 'Каркасная технология' для всех примеров работ. 2025-07-13 22:28:12 +03:00
28 changed files with 277 additions and 78 deletions

View File

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

View File

@ -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"

BIN
public/images/dom1.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

BIN
public/images/dom11.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

BIN
public/images/dom2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

BIN
public/images/dom22.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

BIN
public/images/dom3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

BIN
public/images/dom33.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
public/images/dom4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

BIN
public/images/dom44.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 467 KiB

BIN
public/images/dom5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

BIN
public/images/dom55.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

BIN
public/images/dom6.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 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

BIN
public/images/stroy.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 284 KiB

BIN
public/images/un2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -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 />
С ФИКСАЦИЕЙ ЦЕНЫ

View File

@ -68,12 +68,11 @@ const AboutSection = () => {
<div className="relative h-[300px] sm:h-[400px] lg:h-[500px] w-full rounded-2xl overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
<Image
src="/images/stryokab.webp?v=3&t=1234567890"
src="/images/stroy.jpg"
alt="Строительная бригада за работой"
fill
className="object-cover transition-transform duration-700 group-hover:scale-110"
priority
unoptimized={true}
/>
{/* Декоративные элементы */}
<div className="absolute -top-4 -left-4 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>

View File

@ -100,10 +100,15 @@ const ContactSection = () => {
</svg>
</div>
<div>
<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">
<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>
<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>

View File

@ -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

View File

@ -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
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"
>
+7 953 013 24 23
</a>
<div className="space-y-1">
<a
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>
<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)}
className="md:hidden 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 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-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)}
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)}
/>
</>
);

View File

@ -76,6 +76,11 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
};
const handleNext = () => {
if (step === 1 && !material) return;
if (step === 2 && !area) return;
if (step === 3 && !finish) return;
if (step === 4 && !finance) return;
if (step === 4) {
handleSubmitCalculator();
return;
@ -83,7 +88,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
setStep((s) => s + 1);
};
const handlePrevious = () => {
const handlePrev = () => {
setStep((s) => s - 1);
};
@ -127,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;
@ -211,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">
<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>
<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] ${
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"
@ -235,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">
<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>
<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] ${
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"
@ -263,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">
<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>
<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] ${
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"
@ -289,15 +312,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step === 5 && (
<div className="text-center">
<div className="mb-6 sm:mb-8">
<div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">🏠</div>
<div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4"></div>
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Расчет готов!
Спасибо за заявку!
</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">
Итоговая стоимость строительства
Мы свяжемся с вами в ближайшее время
</p>
</div>
@ -328,7 +351,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
<div className="flex justify-between items-center mt-6 sm:mt-8">
{step > 1 && step < 5 && (
<button
onClick={handlePrevious}
onClick={handlePrev}
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 transition-all duration-300 hover:scale-105 text-sm sm:text-base"
>
<ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
@ -336,7 +359,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
</button>
)}
{step < 4 ? (
{step < 4 && (
<button
onClick={handleNext}
disabled={!canProceed()}
@ -345,7 +368,9 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
<span>Далее</span>
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
) : step === 4 ? (
)}
{step === 4 && (
<button
onClick={handleNext}
disabled={!canProceed() || isSubmitting}
@ -354,12 +379,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
<span>{isSubmitting ? 'Отправка...' : 'Рассчитать'}</span>
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
) : (
)}
{step === 5 && (
<button
onClick={closeModal}
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 mx-auto text-sm sm:text-base"
>
<span>Готово</span>
<span>Закрыть</span>
<Check className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
)}

View File

@ -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-sm font-semibold -mt-1">STROY</div>
<div className="text-xl font-bold">Ваш Дом</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"
className="flex items-center text-white hover:text-blue-400 transition-colors mb-2 group"
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" />
<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"
>
Оставить заявку

View File

@ -9,51 +9,123 @@ import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
const workExamples = [
{
id: 1,
title: 'Дом из пеноблоков',
description: 'Г.Чебоксары п. Альгешево, 100 м2',
image: '/images/koroche.jpg',
title: 'Дом из керамзитобетона',
description: 'Московская область, г. Люберцы, дом из керамзит бетона',
image: '/images/dom1.jpeg',
area: '100 кв.м',
material: 'Пеноблоки',
material: 'Керамзитобетон',
},
{
id: 2,
title: 'Дом из пеноблоков',
description: 'г. Мариинский Посад, 80 м2',
image: '/images/koroche2.jpg',
area: '80 кв.м',
material: 'Пеноблоки',
title: 'Дом из пенобетонных блоков',
description: 'г. Чебоксары, Альгешево, дом 75 м2 из пенобетонных блоков',
image: '/images/dom2.jpg',
area: '75 кв.м',
material: 'Пенобетонные блоки',
},
{
id: 3,
title: 'Дом из пеноблоков',
description: 'г. Цивильск, 80 м2',
image: '/images/koroche3.jpg',
area: '80 кв.м',
material: 'Пеноблоки',
title: 'Кирпичный дом',
description: 'г. Чебоксары, ул. Гражданская, дом 120 м2 из кирпича',
image: '/images/dom3.jpg',
area: '120 кв.м',
material: 'Кирпич',
},
{
id: 4,
title: 'Дом из пеноблоков',
description: 'с. Комсомольское, 78 м2',
image: '/images/koroche4.jpg',
area: '78 кв.м',
material: 'Пеноблоки',
title: 'Дом из керамзитбетонных блоков',
description: 'пос. Кугеси, дом 175 м2 из керамзитбетонных блоков',
image: '/images/dom4.jpg',
area: '175 кв.м',
material: 'Керамзитбетонные блоки',
},
{
id: 5,
title: 'Дом из пеноблоков',
description: 'Сосновка, 92 м2',
image: '/images/koroche5.jpg',
area: '92 кв.м',
material: 'Пеноблоки',
title: 'Дом из керамзитбетонных блоков',
description: 'г. Чебоксары, ул. Лунная, дом 110 м2 из керамзитбетонных блоков',
image: '/images/dom5.jpg',
area: '110 кв.м',
material: 'Керамзитбетонные блоки',
},
{
id: 6,
title: 'Дом из пеноблоков',
description: 'пос. Кугеси 110 м2',
image: '/images/koroche6.webp',
title: '2х этажный каркасный дом',
description: 'г. Чебоксары, Южный поселок, 2х этажный каркасный дом',
image: '/images/dom6.jpeg',
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: 'Керамзитбетонные блоки',
},
];
@ -118,7 +190,7 @@ const WorkExamplesSection = () => {
{/* Заголовок секции */}
<FadeInSection as="div" className="text-center mb-12 sm:mb-16">
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
Примеры наших работ
Примеры работ
</h2>
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
</FadeInSection>